Question

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

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

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文件中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;
}

}

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

2 个答案: