如何访问 *ngFor 循环中的一个按钮并在单击事件上为其分配公共删除方法

Question

我的循环可以跨越按钮并分配属性。

.html

 <ng-container matColumnDef="actions">
          <mat-header-cell mat-header-cell *matHeaderCellDef>{{
            'scenarios.scenariosList.actionsColumn' | translate
          }}</mat-header-cell>
          <mat-cell class="mr-3" mat-cell *matCellDef="let element">
            <div class="w-100 d-flex justify-content-start align-items-center" *ngFor="let button of actionButtons">
              <button mat-icon-button matTooltip="{{ button.tooltipMsg | translate }}" color="{{ button.color }}">
                <mat-icon>{{ button.icon }} </mat-icon>
              </button>
            </div>
          </mat-cell>
        </ng-container>

.ts 循环中的值

  public confirmDialog(scenarioId: string): void {
    const dialogRef = this.dialog.open(ScenarioListDialogComponent, {
      maxWidth: '400px',
      data: { scenarioId }
    });
    dialogRef
      .afterClosed()
      .subscribe((dialogResult) => {
        this.result = dialogResult;
      })
      .unsubscribe();
  }

interface ActionButton {
  icon: string;
  tooltipMsg: string;
  color?: string;
}

  public actionButtons: ActionButton[] = [
    {
      icon: 'edit',
      tooltipMsg: 'scenarios.scenariosList.editBtnTooltipMsg',
      color: 'primary'
    },
    {
      icon: 'cloud_upload',
      tooltipMsg: 'scenarios.scenariosList.uploadBtnTooltipMsg',
      color: 'accent'
    },
    {
      icon: 'delete',
      tooltipMsg: 'scenarios.scenariosList.deleteBtnTooltipMsg',
      color: 'warn'
    }
  ];

我还拥有如下所示的方法确认方法，三个按钮包含我试图完成的 ，就是将方法confirence> confircondialog分配给具有iCON的按钮：'DELETE：' '并在单击时调用该方法。不幸的是，我最终将此方法分配给所有三个按钮，我似乎无法理解NG循环如何工作以及如何解决此问题。

有帮助吗？

我在NGFOR内尝试了NGIF，但出现错误...

Answer 1

您是否还希望渲染其他两个按钮？我要假设是的。因此，我们将所有按钮渲染：

   (click)="button.icon === 'delete' ? confirmDialog(element.scenarioId) : ''"

但是仅在按钮上，其中button.icon是'delete'我们可以调用enckerndialog（）在其他上将无需做任何事情''。

<button
   (click)="button.icon === 'delete' ? confirmDialog(element.scenarioId) : ''"
   mat-icon-button 
   matTooltip="{{ button.tooltipMsg | translate }}" 
   color="{{ button.color }}">
   <mat-icon>{{ button.icon }} </mat-icon>
</button>

Answer 2

这不是你想要的吗？

        <div class="w-100 d-flex justify-content-start align-items-center" *ngFor="let button of actionButtons">
          <button mat-icon-button (click)="button.icon=='delete' ? doIt():null">
            <mat-icon>{{ button.icon }} </mat-icon>
          </button>
        </div>

我刚刚将有条件的表达式用作点击处理程序。

我个人将EG通过按钮模型到通用ActionPerformed（B：ActionButton），然后从组件代码中进行剩下的

        <div class="w-100 d-flex justify-content-start align-items-center" *ngFor="let button of actionButtons">
          <button mat-icon-button (click)="buttonAction(button)">
            <mat-icon>{{ button.icon }} </mat-icon>
          </button>
        </div>


buttonAction(button:ActionButton){
   if(button.icon='delete') {doIt(); return}
}

Answer 3

有多种方法可以处理这个问题，在我看来，我有几种：

方法 1

• 将辅助方法添加到现有按钮

<mat-icon (click)="helper(button.icon)">{{ button.icon }} </mat-icon>

在 .ts 文件中，您将拥有辅助方法 方法

helper(icon: string):void {
 if (icon === 'delete') {
    this.confirmDialog()
 }
}

2

如果您知道删除索引将始终位于最后，那么在 .html 中，您可以通过将 let last = last 添加到 ngFor 来跟踪最后一个元素，然后绑定confirmDialog以单击

<div 
class="w-100 d-flex justify-content-start align-items-center" 
*ngFor="let button of actionButtons; let last = last">
    <button mat-icon-button 
    matTooltip="{{ button.tooltipMsg | translate }}" 
    color="{{ button.color }}">
        <mat-icon>{{ button.icon }} </mat-icon>
        <mat-icon ngIf="last" (click)="confirmDialog()">{{ button.icon }} </mat-icon>
    </button>
</div>