角度に基づくツリー型セカンダリテーブルを実現する

  <div class="userContent_content">
    <div>
      <テーブル>
        <tr>
          <td>ノード名</td>
          <td>ノード管理 IP</td>
          <td>ノードログイン名</td> 
          <td>ノードログインパスワード</td> 
        </tr>
        // ng-container を空のタグとして使用して、レビュー要素に見つからない for または if イベントを配置できるようにします <ng-container *ngFor="let item of currentTotalList,let i = index">
          <tr>
            <td style="color: #04AEB4;cursor: ポインター;" class="img">
              <div>
                <div>{{item.name} </div>
                <div>
        // 以下は矢印の展開と折りたたみを切り替える矢印の画像です。現在のクリック インデックスがリスト インデックスと等しいかどうかを判断し、等しい場合は展開され、等しくない場合は折りたたまれます <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.ユーザー名}}</td>
            <td>{{item.パスワード}}</td>
          </tr>
        // ng-container タグを再度使用して、テーブルの子項目をネストします <ng-container *ngFor="let childItem of item.nodeList, let j = index">
        // for ループと if 判定は同じタグ内に共存できないため、隠しイベント if は tr タグ内に配置されます。現在クリックされているインデックスがリストのインデックスと一致しているかどうかを判定し、等しい場合は折りたたまれ、等しくない場合は表示されます。
 
            <tr *ngIf="i == 現在のクリックオープンインデックス">
              <td style="color: #04AEB4;cursor: ポインター;" class="img">
                <div>
                  <div>
                    {{childItem.masterIp}} </div>
                </div>
              </td>
              <td>{{childItem.ip}}</td>
              <td>{{childItem.ユーザー名}}</td>
              <td>{{childItem.password}}</td>
            </tr>
          </ng-コンテナ>
        </ng-コンテナ>
 
      </テーブル>
    </div>
    
  </div>

      .userContent_content{
        幅: 100%;
        高さ: calc(~"100% - 60px");
        オーバーフロー:自動;
        >div:n番目の子(1){
          >表{
            幅: 100%;
            tr{
              td{
                幅: 25%;
                テキスト配置: 中央;
                フォントサイズ: 14px;
                色: #fff;
                パディング: 16px 0px;
                ボックスの影: 0 1px #333;
              }
            }
            .img {
              >div {
                幅: 100%;
                ディスプレイ: フレックス;
                位置: 相対的;
  
                >div:n番目の子(1) {
                  幅: 85%;
                  空白: ラップなし;
                  テキストオーバーフロー: 省略記号;
                  -o-テキストオーバーフロー:省略記号;
                  オーバーフロー: 非表示;
                  マージン: 0 自動;
  
                }
              }
  
              画像 {
                高さ: 10px !重要;
                幅: 10px !重要;
                左マージン: 0 !重要;
                位置: 絶対;
                右: 0;
                上: 3px;
              }
            }
          }
        }
  
        >div:n番目の子(2){
          高さ: 80px;
          幅: 90%;
          ディスプレイ: フレックス;
          アイテムの位置を中央揃えにします。
          マージン: 0 自動;
          コンテンツの端揃え: flex-end;
          ＃ページ{
            表示: テーブル;
          }
        }
      }

  クリック表示子リスト = (i, 項目) =>{
    console.log(i,this.currentClickOpenIndex)
    if(this.currentClickOpenIndex==i){
      this.currentClickOpenIndex = -1
    }それ以外{
      this.currentClickOpenIndex = i
    }
  }