Как связать динамическую функцию на элемент HTML, используя угловую 6?

Question

Я пытаюсь привязать событие к динамически созданному элементу.Я вполне успешен, но я не могу связать функцию с событием.вот мой код

.ts код

 data = ['fn1()', 'fn2()', 'fn3()'];
 fn1() { alert(1) }
  fn2() { alert(2) }
  fn3() { alert(3) }

HTML-код

   table>
  <ng-container *ngFor='let d of data'>
    <tr (click)=d>
      <td>
        :) !!!
      </td>
    </tr>
  </ng-container>

но когда я добавляю функцию статически, то она вызывается, то есть.

<table>
  <ng-container *ngFor='let d of data'>
    <tr (click)=fn1()>
      <td>
        :) !!!
      </td>
    </tr>
  </ng-container>

</table>

это работает, кто-нибудь может мне помочь в этом?

Answer 1

Вам нужен массив функций, а не массив строк. И вы хотите вызвать функцию при нажатии на div:

Машинопись:

fn1 = () => { alert(1) };
fn2 = () => { alert(2) };
fn3 = () => { alert(3) };
data = [this.fn1, this.fn2, this.fn3];

HTML:

<div (click)="d()">

Демо