在 ngfor angular 中添加一些控件

Question

例如我有一个 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。

应该是这样的 more less

<button> 
<button><checkbox>
<button>

知道如何实现这些吗？

抱歉需要更新我的问题。如果我想达到这样的效果如何

<button>
<button>
<checklist>
<button>

谢谢

Answer 1

在你的 ngFor 中引入 'first as' 并添加一个容器来检查它是否是迭代中的第一个元素：

<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>

如果 'number 1' 你确实是指位置索引==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>

Answer 2

可以使用索引获取当前索引，

<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>

在 ngfor angular 中添加一些控件

add some control inside ngfor angular

html

typescript

angular-material

angular