时间戳

首页 > 解决方案 > 在来自数组的按钮的 ngFor 循环中生成不同的（单击）属性

angular - 在来自数组的按钮的 ngFor 循环中生成不同的（单击）属性

问题描述

我有一个 JSON 文件，我从中获取配置以在工具栏中生成一组按钮。

在每条记录中，我存储有关每个按钮的信息，以及类、图标……我还想在每个按钮中设置将通过事件触发的方法(click)

如何使用其单击事件生成视图中的每个按钮？

它是一个角度组件，根据从该JSON文件接收到的信息生成工具栏

我需要类似的东西：

HTML

<mat-button-toggle-group>
    <mat-button-toggle *ngFor="let tool of tools">
      <button [click]="tool.click"><i [class]="tool.class"></i></button>
    </mat-button-toggle>
  </mat-button-toggle-group>

数组（JSON 文件）

tools =
  [
    { id: 0, class: 'fas fa-sign-out-alt', click: 'addPizza()'},
    { id: 1, class: 'fas fa-arrow-left', click: 'removePizza()' },
    { id: 2, class: 'far fa-sticky-note', click: 'updateGrid()' }
  ];

预期：生成一组按钮，每个按钮内都有特定的方法

标签： angularbuttonclickngfor

解决方案

进行两项更改，在模板中替换[click]="tool.click"为(click)="tool.click()"和在 TS 中，使click属性成为函数

试试这样：

TS：

tools =
  [
    { id: 0, class: 'fas fa-sign-out-alt', click: () => this.addPizza()},
    { id: 1, class: 'fas fa-arrow-left', click: () => this.removePizza() },
    { id: 2, class: 'far fa-sticky-note',click: () => this.updateGrid() }
  ];

模板：

 <button (click)="tool.click()"><i [class]="tool.class"></i></button>

推荐阅读