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

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 我还有如下所示的方法 confirmDialog 和三个包含来自上面循环的值的按钮

  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'
    }
  ];

我想要完成的是将方法 confirmDialog 分配给具有 icon: 'delete' 的按钮，并在单击时调用该方法。不幸的是，我最终将这个方法分配给了所有三个按钮，我似乎无法理解 ng 循环是如何工作的，我该如何解决这个问题。

有什么帮助吗？

我在 ngFor 中尝试了 ngIf 但出现错误...

Answer 1

这不就是你想要的吗？

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

我刚刚使用条件表达式作为点击处理程序。

就我个人而言，例如，我会将按钮模型传递给通用 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 2

你还想渲染其他 2 个按钮吗？我假设是的。所以我们渲染所有按钮：

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

但只有在按钮上，button.icon 是 'delete' 我们可以在其他按钮上调用 confirmDialog() 它什么都不做 ''。

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

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

方法一

向现有按钮添加辅助方法

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

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

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

方法二

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

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

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

How to access one button in *ngFor loop and assign it public delete method on click event

ngfor

angular

方法一

方法二