Генерация различных (щелкающих) атрибутов в цикле кнопок ngFor из массива - PullRequest
Новая
       18

Генерация различных (щелкающих) атрибутов в цикле кнопок ngFor из массива

1 голос
/ 06 июня 2019

У меня есть файл 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()' }
  ];

Ожидается: создание группы кнопок внутри каждой кнопки имеет определенный метод

Ответы [ 2 ]

0 голосов
/ 10 июня 2019

Наконец я решил по-другому,

По сути, это не работало, потому что я получал информацию по входу в компоненте, а не по прямой переменной внутри самого компонента (я пропустил этот факт в моем вопросе).

Итак, наконец, я создал метод в компоненте, который обрабатывает функцию, вызываемую в зависимости от строки, заданной для свойства click в файле 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;
}

}

0 голосов
/ 06 июня 2019

Внесите два изменения, в шаблоне замените [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>
...