在 *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

发现这个为什么在使用函数时总是执行 Angular 2 中的 *ngIf ？

我解决了这个问题

成分

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

html

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