まず効果を見てみましょう: コード: 1.html <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> 2. 少ない .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; #ページ{ 表示: テーブル; } } } 3.js (1) currentTotalListテーブルデータの形式は次のようになります(シミュレーションデータを自分で記述することもできます)。 (2)現在のクリックインデックス変数currentClickOpenIndexを-1に初期化する (3)は展開と折りたたみの矢印のクリックイベントです。 クリック表示子リスト = (i, 項目) =>{ console.log(i,this.currentClickOpenIndex) if(this.currentClickOpenIndex==i){ this.currentClickOpenIndex = -1 }それ以外{ this.currentClickOpenIndex = i } } そして完成です... Angular をベースにしたツリー型セカンダリ テーブルの実装に関するこの記事はこれで終わりです。Angular のツリー型セカンダリ テーブルに関する関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: PostgreSQL データベースにおける varchar、char、text の比較に関する簡単な説明
目次1. withRouterコンポーネントを使用する2. ルートタグを使用するReactRoute...
まずは、以前書いた CSS カルーセルアニメーション効果を見てみましょう。アニメーションの遷移をスム...
はじめに: MySQL を使用してテーブルを作成する場合、通常は自動インクリメント フィールド (A...
目次JSBridgeの起源JSBridgeの双方向通信原理JSはネイティブを呼び出すネイティブコール...
CSS のモジュール ソリューションは、JS のモジュール ソリューションと同じくらい多く存在すると...
私たちの生活、仕事、勉強において、ソーシャル ネットワークは徐々に将来のインターネット発展のトレンド...
目次ルーティングマネージャー背景はじめる問題を解決する方法要約するルーティングマネージャー各ジャンプ...
htmlのデフォルトの送信方法は、postではなくgetです。postに変更したい場合は、 meth...
通常のウェブサイトのソースコードを開くと、ソースコードは<!DOCTYPE htmlで始まる必...
CentOS6.9+Mysql5.7.18 ソースコードのインストールでは、以下の操作を root ...
公式サイトから mysql-5.7.19-winx64 をダウンロードします。これはシステムの 64...
コンテナデータボリュームとはデータがコンテナ内にある場合、コンテナを削除するとデータは失われます。例...
この記事では、モバイル署名機能を実装するためのJavaScriptの具体的なコードを参考までに共有し...
以下は、B+ ツリーのデータ構造と実験結果からの推測に基づいた私の判断です。間違いがあればご指摘くだ...
序文プロジェクトを .net core に移行した後、 System.Drawing.Commonコ...