Как обнаружить изменение свойства объекта, которое связано с другим свойством объекта?

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>

Но * ngIf не обновляется при изменении переменной 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.