Angular 的 *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

Angular 的 *ngIf 不显示组件的模板

Angular's *ngIf does not show the component's template

angular-ng-if

angular