例如我有一個 ngfor
<ng-container *ngFor="let setting of settings | trackBy: trackById">
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>{{ setting.value.caption }}</button>
</mat-menu>
</ng-container>
它將顯示 ngfor 設定中有多少值的按鈕串列。
現在我想添加一些復選框，例如，但僅限于按鈕編號 1。
它應該是這樣的。
<button>
<button><checkbox>
<button>
知道如何實作這樣的目標嗎？
抱歉需要更新我的問題。如果我想達到這樣的效果怎么樣
<button>
<button>
<checklist>
<button>
謝謝
uj5u.com熱心網友回復：
將“first as”引入您的 ngFor 并添加一個容器以檢查它是否是迭代中的第一個元素：
<ng-container *ngFor="let setting of settings; first as isFirst; trackBy: trackById">
(...code...)
<button...></button>
<ng-container *ngIf="isFirst">
<checkbox...></checkbox>
</ng-container>
</ng-container>
如果“數字 1”確實是指位置 index==1，則使用：
<ng-container *ngFor="let setting of settings; let i = index; trackBy: trackById">
(...code...)
<button...></button>
<ng-container *ngIf="i == 1">
<checkbox...></checkbox>
</ng-container>
</ng-container>
如果要在位置 2 處顯示元素的復選框，并在其他位置顯示按鈕：
<ng-container *ngIf="i == 2">
<checkbox...></checkbox>
</ng-container>
<ng-container *ngIf="i != 2">
<button...></button>
</ng-container>
或者，更短：
<ng-container *ngIf="i == 2; else showButton">
<checkbox...></checkbox>
</ng-container>
<ng-container #showButton">
<button...></button>
</ng-container>
uj5u.com熱心網友回復：
您可以使用索引來獲取當前索引，
<ng-container *ngFor="let setting of settings | trackBy: trackById; let idx = index">
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>{{ setting.value.caption }}</button>
<checkbox *ngIf="idx === 1" />
</mat-menu>
</ng-container>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/408383.html
標籤：