在 ngfor angular 中添加一些控件答案

【问题标题】：add some control inside ngfor angular在 ngfor angular 中添加一些控件
【发布时间】：2022-01-11 21:53:58
【问题描述】：

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

谢谢

【问题讨论】：

标签： html angular typescript angular-material

【解决方案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>

如果“数字 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>

【讨论】：

它仅适用于第一个元素吗？如果我想从迭代中获取 3 个元素呢？
'isFirst' （或者不管你怎么称呼它，只要确保它在它之前是'first as'）将指向位置 [0] 处的项目，如果你使用 i = index 版本，你可以检查 i 的任何值。
如果我想在第二个或任何迭代中跳过按钮并使用复选框进行更改，怎么样？就像..按钮按钮复选框按钮以垂直方式。
我用新的例子编辑了答案，最好把代码放在那里而不是 cmets。

【解决方案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>

【讨论】：