Как динамически изменить список на основе значений из хранилища NgRx?

Question

Все еще пытаюсь понять, как работают RxJs / Observables, так что это может быть очень простой вопрос.

Я пытаюсь изменить угловой компонент (верхняя панель навигации) для отображения ссылки на основезначение из магазина ngrx.В настоящее время в компонент navbar передается статический массив ссылок.

Также имеется компонент Layout, который инициализирует этот список.

Вот фрагмент кода, который у меня есть:

export class LayoutContainer implements OnDestroy {
  links: Link[] = [  // list of links
    {
      label: 'SESSIONS',
      path: '/sessions'
    },
    {
      label: 'BOOKINGS',
      path: '/bookings'
    },
    {
      label: 'ACCOUNT',
      path: '/account'
    }
  ];


constructor( private store: Store<fromAccount.State>
  ) {

    this.clubAdminList$ = store.pipe(
      select(fromAccount.getUserClubAdminList)
    );
  }

'clubAdminList' - это то, что я беру из магазина.Как бы я динамически изменил список ссылок на основе значения из этого clubAdminList?

Answer 1

Я немного не уверен, какой тип данных возвращает getUserClubAdminList, поэтому я могу дать вам только общее представление.

Есть два способа сделать это.

constructor( private store: Store<fromAccount.State>
  ) {

    store.pipe(
      select(fromAccount.getUserClubAdminList)
    ).subscribe(x => {
        this.links = x.map(u => ........ <do whatever you need to adhere to Link interface>
    });
  }

2.

<nav class="nav navbar">
    <a *ngFor="clubAdminList$ | async as link" routerLink="{{link.path}}"> {{ link.label }} </a>
</nav>

constructor( private store: Store<fromAccount.State>
  ) {

    this.clubAdminList$ = store.pipe(
      select(fromAccount.getUserClubAdminList),
      map(x => ........ <do whatever you need to adhere to Link interface> )
    );
  }