在* ngIf中使用函数运行几次而不是一次

Question

模板

<pre *ngIf="isAdmin()">{{email|json}} - {{user|json}}</pre>

组件

isAdmin() {
    console.log('isAdmin: ', this.bcAuthService.isAdmin());
    return this.bcAuthService.isAdmin();
}

服务

isAdmin() {
    return this.admins.includes(localStorage.getItem("email"));
}

问题

组件中的功能使打印多次。为什么？这是错的吗？有什么更好的方法？

Answer 1

模板方法几乎总是会被多次调用。对于*ngFor来说，要多次迭代也是如此。如果您有执行昂贵调用的操作，则应缓存结果并在方法中返回结果，或使用ngOnInit检索/计算值并将其设置在组件中。

模板代码

<pre *ngIf="isAdmin">{{email|json}} - {{user|json}}</pre>

组件

export class MyComponent implements OnInit {

    isAdmin: boolean;

    ngOnInit() {
        this.isAdmin = this.bcAuthService.isAdmin();
        console.log('isAdmin: ', this.isAdmin);
    }
}

Answer 2

找到此why *ngIf in angular 2 always is executing when use function?

后

我通过

解决了问题

组件

ngOnInit() {
    this.is_admin();
}
is_admin() {
    this.isAdmin = this.bcAuthService.isAdmin();
}

html

<pre *ngIf="isAdmin">{{email|json}} - {{user|json}}</pre>

Answer 3

现在您没有method（成员），并且它不会发送“ isAdmin：true”垃圾邮件，但这并不意味着问题已得到解决。

您可能对该组件的changeDetection和ChangeDetectorRef感兴趣 在更改isAdmin来更新模板（detectChanges）时实际告诉角度。