如何检测绑定到另一个对象属性的对象属性的变化？

Question

我有很多导航项目。用户具有适当的规则时，每个导航栏都应该可见。我尝试一些东西：

我的对象包含一些规则：

rules: {
    canSeeProfile: true,
    canSeeAdminZone: false,
    ...
}

我还有一系列导航项：

nav: [
    {title: 'profile', visible: this.rules.canSeeProfile},
    {title: 'admin zone', visible: this.rules.canSeeAdminZone && this.rules.canSeeProfile},
    ...
]

我的标题包含以下模板：

<ng-template *ngFor="let navItem of nav">
    <li *ngIf=navItem.visible>
        {{navItem.title}}
    </li>
</ng-template>

但是* ng如果rules变量更改时未更新：

hideProfile() {
    this.rules.canSeeProfile = false;
}

如何在不重新初始化nav数组的情况下更新模板？或者，也许有更好的解决方案？谢谢！

Answer 1

只需用函数替换您的值即可

nav: [
  {title: 'profile', visible: () => this.rules.canSeeProfile},
  {title: 'admin zone', visible: () => this.rules.canSeeAdminZone && this.rules.canSeeProfile},
  ...
]

然后使用

<li *ngIf="navItem.visible()">

或者，如果您希望它效率更高一点（但更冗长），则每次规则更改时都会发出一个事件，然后重新计算存储在nav中的每个可见值。