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

Question

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

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

如何在视图中生成每个按钮及其点击事件？

它是一个 angular 组件，它根据从这个 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()' }
  ];

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

Answer 1

进行两处更改，在模板中将 [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>

Answer 2

最后我用另一种方式解决了，

基本上它不起作用，因为我是通过组件中的输入检索信息，而不是通过组件本身内的直接变量（我在我的问题中省略了这个事实）。

所以最后我在组件中创建了一个方法来处理根据 JSON 文件中单击属性时设置的字符串触发的函数：

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

HTML:

<div>
<button *ngFor="let tool of tools" (click)="handleClick(tool.click)">
  <i [class]="tool.class" ></i>
</button>

组件：

  handleClick(method: string) {
   switch (method) {
     case 'addPizza':
     this.addPizza();
    break;
     case 'removePizza':
     this.removePizza();
    break;
     case 'updateGrid':
     this.updateGrid();
    break;

  default:
    break;
}

}

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

Generate different (click) attributes in a ngFor loop of buttons from array

angular

button

click

ngfor