如何基于NgRx存储中的值动态修改列表?

时间:2019-02-04 23:15:50

标签: angular rxjs ngrx

仍然试图围绕RxJs / Observables的工作原理,所以这可能是一个非常基本的问题。

我正在尝试修改Angular组件(顶部导航栏)以基于ngrx存储中的值显示链接。当前,传递给导航栏组件的是静态链接数组。

还有一个用于初始化此列表的布局组件。

这是我所拥有的片段:

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中的值动态修改链接列表?

1 个答案:

答案 0 :(得分:0)

我有点不确定IDisposable返回什么类型的数据,所以我只能给您广泛的看法。

有两种方法。

    1。
getUserClubAdminList
    2。
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>
    });
  }
<nav class="nav navbar">
    <a *ngFor="clubAdminList$ | async as link" routerLink="{{link.path}}"> {{ link.label }} </a>
</nav>