(click) = '' does not work, in angular 2

Question

I understood a lot, but the solution for me does not work. I am trying to call a method in my code, but it does not work. An error has occurred, but the click event does not work either. In my code, I add a button dynamically and it is added to my code. But when I click on Approvedor UnApproved, nothing happens. I use buttons <ng-table>, Approvedand UnApprovedin the directive <ng-table>. Please suggest me where I am doing wrong?

My code is:

     editData() {
    this.data.forEach(function (row) {
          if (row.isApproved) {
        row.editButton = "<button (click)='approveUnApproveLeave()'>UnApproved</button>";
      } else {
        row.editButton = "<button (click)='approveUnApproveLeave()'>Approved</button>";
        row.isApproved = row.isApproved.toString();
      }
    })
  }

  approveUnApproveLeave() {
    console.log("approveUnApproveLeave called");
  }

} // class closed

See the picture for a better understanding.

Answer 1

If you use dynamic HTML to display, then ... innterHTML

html , innerHTML, . , HTML angular context, . (click), angular context , innerHTML .

, HTML angular, DynamicComponentLoader, HTML, angular, , click

DEMO: https://plnkr.co/edit/BcQXNf5AWrDUXFamIGIy?p=preview

Answer 2

Angular ( AoT ). HTML, , Angular. (click)="..." -is, Angular.

,

  constructor(private elRef:ElementRef, private cdRef:ChangeDetectorRef);

  editData() {
    this.data.forEach((row) => { // don't use function if you want to use `this`
          if (row.isApproved) {
        row.editButton = "<button>UnApproved</button>";
      } else {
        row.editButton = "<button>Approved</button>";
        row.isApproved = row.isApproved.toString();
      }
    });
    this.cdRef.detectChanges(); // to ensure the DOM is updated
    // add event handlers imperatively
    this.elRef.nativeElement.querySelectorAll(button).forEach(b => b.addEventListener('click', this.eventHandler.bind(this));
  }