我正在創建一個樹形選單，在視覺上它看起來像這樣：
該樹是根據從服務中獲取的物件陣列創建的，這些物件是從日期屬性中提取的。
現在，我必須獲取樹形選單以允許顯示和折疊：年、月和完整日期，采用此組件的樣式： https ://angular2-tree.readme.io/
理想情況下，我會用打字稿來做這件事，但如果這對我來說很難，我會??嘗試使用外部組件。
這是html代碼：
<ul>
<li *ngFor="let y of tree | keyvalue">{{y.key}}
<ul>
<li *ngFor="let m of tree[y.key] | keyvalue">{{m.key}}
<ul>
<li *ngFor="let d of tree[y.key][m.key] | keyvalue">{{d.key}}
<ul>
<li *ngFor="let h of tree[y.key][m.key][d.key]"><a [ngClass]="{'hourSelected': (idSchedule === h.id || lastId === h.id),'hourUnSelected': idSchedule !== h.id}" (click)="loadMacroProcesses(h.id)">{{h.hour}}</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
這將是解決方案，現在我將對其進行改進：
<ul>
<li *ngFor="let y of tree | keyvalue; let i=index" (click)="indexExpanded=indexExpanded==i?-1:i"><span>{{y.key}}</span>
<ul [hidden]="indexExpanded!=i?true:null">
<li *ngFor="let m of tree[y.key] | keyvalue"><span>{{m.key}}</span>
<ul>
<li *ngFor="let d of tree[y.key][m.key] | keyvalue">{{d.key}}
<ul>
<li *ngFor="let h of tree[y.key][m.key][d.key]"><a [ngClass]="{'hourSelected': (idSchedule === h.id || lastId === h.id),'hourUnSelected': idSchedule !== h.id}" (click)="loadMacroProcesses(h.id)">{{h.hour}}</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
你能推薦我一個好的外部組件嗎？謝謝。
注意：我正在使用 Angular 11 版
注意：如果您部署一年，則應將其余年份縮回。
注意：Angular 材料對我無效
uj5u.com熱心網友回復：
您可以將可見性引數和單擊事件添加到父 ul。它的作業原理是，當您單擊頂部 ul 元素時，它們將具有可見性的布林值。您將有一個方法可以在真/假之間切換，如果為真則顯示為假，如果為假則隱藏。點擊事件應該在頂部 li 元素上，并且在其子元素上可見。
uj5u.com熱心網友回復：
您應該檢查primeng 提供的樹組件。它有自己的資料格式，可以在上面進行自定義。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/454271.html
標籤：javascript 有角度的 打字稿 树 树视图
下一篇：如果檢查失敗，為什么要打字？