Вызов функции компонента из сгенерированного dom элемента - angular

Question

Я хочу создать динамическое c количество html кнопок элемента dom и позволить им вызывать службу при нажатии. Есть ли способ сделать это?

Например, test.component.ts:

import {ApiService } from '../services/api.service';
...
export class test implement OnInit(){
    constructor(private apiGet : ApiService) { }
    ngOnInit() {
        ...
        for (i = 0; i < x; i++) {
            var row = document.getElementById('row');
            var cell = insertCell();
            cell.innerHTML = "<button name='" + i + '" (click)=test.callService()>click me</button>";
        }
    }
    public callService() {
        //call ApiService here using buttons name
    }
}

Я заставляю его работать, когда я помещаю событие (click) в Элемент html внутри test.component. html, но он не работает для кнопок, созданных dom. Я что-то упускаю или есть лучший способ сделать это?

Answer 1

Для динамически создаваемых элементов обработчики событий должны быть определены методом addEventListener(). Также вы можете вручную запустить обнаружение изменений, чтобы убедиться, что элементы генерируются в DOM. Попробуйте следующее

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { ApiService } from '../services/api.service';
...
export class test implement OnInit {
  constructor(private apiGet: ApiService, private _cdr: ChangeDetectorRef) { }

  ngOnInit() {
    ...
    for (i = 0; i < x; i++) {
      var row = document.getElementById('row');
      var cell = insertCell();
      cell.innerHTML = "<button id='button" + i + "' name='" + i + '">click me</button>";
    }
    this.addEventListeners(x);
  }

  private addEventListeners(x) {
    this._cdr.detectChanges();    // <-- manually trigger change detection to be sure
    for (i = 0; i < x; i++) {
      const button = document.getElementById('button' + i);
      if (button) {
        button.addEventListener('click', this.callService());
      }
    }
  }

  public callService() {
      //call ApiService here using buttons name
  }
}

Кроме того, export class test implement OnInit(){ следует заменить на export class test implement OnInit {. Скобки здесь не обязательны.

Answer 2

Ваш html используя ngFor

 <div *ngFor="let button of buttons">
     <button (click)="callService(button.name)">{{button.name}}</button>
 </div>

И ваш компонент:

  buttons = [
    {
      name: 'one'
    },
    {
      name: 'two'
    }
  ];

  callService(buttonName) {
    alert(`call ApiService here using buttons name: [${buttonName}]`);
  }

Проверьте это stackblitz .