Realisierung baumförmiger Sekundärtabellen auf Basis von Angular

  <div Klasse="Benutzerinhalt_Inhalt">
    <div>
      <Tabelle>
        <tr>
          <td>Knotenname</td>
          <td>Knotenverwaltungs-IP</td>
          <td>Knoten-Anmeldename</td> 
          <td>Node-Anmeldekennwort</td> 
        </tr>
        //Verwenden Sie ng-container als leeres Tag, um beim Platzieren von for- oder if-Ereignissen zu helfen, die nicht im Überprüfungselement gefunden werden können <ng-container *ngFor="let item of currentTotalList,let i = index">
          <tr>
            <td style="Farbe: #04AEB4;Cursor: Zeiger;" Klasse="img">
              <div>
                <div>{{item.name}}</div>
                <div>
        // Das Folgende ist ein Bild eines Pfeils, der zwischen dem Erweitern und Reduzieren des Pfeils wechselt. Durch Beurteilen, ob der aktuelle Klickindex gleich dem Listenindex ist, wird er erweitert, wenn er gleich ist, andernfalls wird er reduziert <img (click)="clickShowChildList(i,item.name)"
                    [attr.src]="i == currentClickOpenIndex?'../../assets/resource/img/bottom.png':'../../assets/resource/img/right.png'">
                </div>
              </div>
            </td>
            <td>{{item.ip}}</td>
            <td>{{item.Benutzername}}</td>
            <td>{{item.password}}</td>
          </tr>
        //Verwenden Sie erneut das ng-container-Tag, um die untergeordneten Elemente der Tabelle zu verschachteln <ng-container *ngFor="let childItem of item.nodeList, let j = index">
        // Da die for-Schleife und die if-Beurteilung nicht im selben Tag koexistieren können, wird unser verstecktes if-Ereignis im tr-Tag platziert. Indem beurteilt wird, ob der aktuell angeklickte Index mit dem Listenindex übereinstimmt, wird er ausgeblendet, wenn sie gleich sind, und angezeigt, wenn sie es nicht sind.
 
            <tr *ngIf="i == aktuellerClickOpenIndex">
              <td style="Farbe: #04AEB4;Cursor: Zeiger;" Klasse="img">
                <div>
                  <div>
                    {{childItem.masterIp}}</div>
                </div>
              </td>
              <td>{{childItem.ip}}</td>
              <td>{{childItem.Benutzername}}</td>
              <td>{{childItem.password}}</td>
            </tr>
          </ng-container>
        </ng-container>
 
      </Tabelle>
    </div>
    
  </div>

      .Benutzerinhalt_Inhalt{
        Breite: 100 %;
        Höhe: berechnet (~ „100 % – 60 Pixel“);
        Überlauf: automatisch;
        >div:n-tes-Kind(1){
          >Tabelle{
            Breite: 100 %;
            tr{
              td{
                Breite: 25 %;
                Textausrichtung: zentriert;
                Schriftgröße: 14px;
                Farbe: #fff;
                Polsterung: 16px 0px;
                Kastenschatten: 0 1px #333;
              }
            }
            .img {
              >div {
                Breite: 100 %;
                Anzeige: Flex;
                Position: relativ;
  
                >div:n-tes-Kind(1) {
                  Breite: 85 %;
                  Leerzeichen: Nowrap;
                  Textüberlauf: Auslassungspunkte;
                  -o-text-overflow:Auslassungspunkte;
                  Überlauf: versteckt;
                  Rand: 0 automatisch;
  
                }
              }
  
              img {
                Höhe: 10px !wichtig;
                Breite: 10px !wichtig;
                Rand links: 0 !wichtig;
                Position: absolut;
                rechts: 0;
                oben: 3px;
              }
            }
          }
        }
  
        >div:n-tes-Kind(2){
          Höhe: 80px;
          Breite: 90%;
          Anzeige: Flex;
          Elemente ausrichten: zentrieren;
          Rand: 0 automatisch;
          Inhalt ausrichten: Flex-Ende;
          #Seite{
            Anzeige: Tabelle;
          }
        }
      }

  klickShowChildList = (i,item)=>{
    Konsole.log(i,dieser.aktuellerClickOpenIndex)
    wenn(this.currentClickOpenIndex==i){
      this.currentClickOpenIndex = -1
    }anders{
      this.currentClickOpenIndex = i
    }
  }