事件发出后值未更新

Question

我在组件中有一个简单的 PrimeNg 下拉菜单，其中显示了一些项目。

topnavbar.component.html

<my-dropdown
  [products]="productItems"
  [tables]="tableItems"
></my-dropdown>

tableItems

和

productItems

是从 API 调用获取其值的数组：

topnavbar.component.ts

  getMyList = (params1: string, params2: string) => {
    this.someService
      .getNavList(params1, params2)
      .subscribe({
        next: (resp) => {
          resp.data[0].forEach((item: any) => {
            this.tableItems.push({
              name: item.name,
              url: item.url,
            });
          });
        },
        error: (HttpResponse: HttpErrorResponse) => {},
      });
  };

  constructor(
    ...
    private _eventEmitter: RouteEventEmitService
  ) {
    this._eventEmitter.getTableNameEmitter.subscribe((data: any) => {
      console.log('data', data);
      this.tableItems = [];

      data.data[0].levels.forEach((item: any) => {
        this.tableItems.push({
          name: item.name,
          url: item.url,
        });
      });
    });
  }

在其他一些组件中，我单击按钮并获取新列表，并将新列表视图传递给此顶部导航栏组件。

sidenavigation.component.ts

  buttonClicked = (params: any, params1: string) => {
    this.sidenavService
      .myMethod(params, params11)
      .subscribe({
        next: (resp) => {
          this._eventEmitter.getTableNameEmitter.emit(resp);
        },
        error: (HttpResponse: HttpErrorResponse) => {},
      });
  };

即便如此，我仍然看到旧的列表。为什么列表不更新。事件发射器正在发送我验证的更新列表。请帮忙。

Answer 1

不要使用this.tableItems.push，尝试使用this

this.tableItems = […this.tableItem, {
          name: item.name,
          url: item.url,
        });