Angular's * ngIf不顯示組件的模板

Question

我還沒有與Angular合作過一段時間，但我記得我曾經使用* ngIf來觸發元素。現在，我不確定有什麼問題。 當我直接觸發函數<button (click)="play()">...</button>它的工作原理，但我沒有看到爲什麼它不使用對象的屬性工作。當使用對象的屬性時，該方法正在被觸發，但該值永遠不會被改變（它是不是相同的實例或東西？）。

組件：

public showPlay: boolean = false; 
public arr: Array<Object> = [ 
    {clickHandler: this.play} 
]; 

play(): void { 
    this.showPlay = !this.showPlay; 
} 

模板：

<button *ngFor="let button of arr" (click)="button.clickHandler()">Click</button> 
<play-interface *ngIf="showPlay"></play-interface> 

Answer 1

你可以做這樣的事情，

<button *ngFor="let button of arr" (click)="self[button.clickHandler]()">Click</button> 
<div *ngIf="showPlay">hi</div> 

和模板，

export class AppComponent { 
public showPlay: boolean = false; 
public arr: Array<Object> = [ 
    {clickHandler: 'play'} 
]; 
get self() { return this; } 

play(): void { 
    this.showPlay = !this.showPlay; 
} 

DEMO