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

【问题标题】：Generate different (click) attributes in a ngFor loop of buttons from array在来自数组的按钮的 ngFor 循环中生成不同的（单击）属性
【发布时间】：2019-10-22 01:32:56
【问题描述】：

我有一个 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()' }
  ];

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

【问题讨论】：

你能改变json源吗？如果没有，它可能会比预期的稍微复杂一些。除此之外，[click] 应该是 (click)。
我可以修改json源，但是你的意思是通过什么方式修改呢？
我建议您不要在click 键上使用字符串，而是引用一个方法（或多个方法），以便点击绑定按预期工作。
非常感谢 Adrita Sharma 的帮助，我做了 stackblitz，但它有效，所以我没有与你分享。正如我在回答中所说，如果您生成组件信息并通过 Angular 输入从 JSON 中检索数据，它似乎不起作用......我找到了另一种解决方法

标签： angular button click ngfor

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

【讨论】：

不应该是(click)="tool.click()"吗？
是的。我更新了答案。谢谢。从问题里复制过来的，忘记加()
它不起作用，当我单击它抛出的按钮时：ERROR TypeError: Cannot read property 'addPizza' of undefined
你能分享一个stackbiltz吗，应该可以的。该错误意味着 this 未定义，不应该如此。我认为问题出在其他地方

【解决方案2】：

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

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

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

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

}

【讨论】：