如果抽屉位于另一个组件中，如何更新角度垫表？

Question

主要组件有选项卡、组件A、B等

我的组件_A 已预加载数据，但我有一个过滤按钮。 我有一个按钮可以从另一个组件（主组件）切换抽屉。

 toggleDrawer(): void {
    this.drawerService.toggleDrawer(); // Call service to toggle drawer
  }

主要成分：

        <mat-drawer-container class="drawer-container" autosize>
      <div class="main-component-container">
        <div class="mat-tab-grp">
          <nav
            class="nav-bar"
            mat-tab-nav-bar
            #tabGroup
            mat-stretch-tabs
            color="accent"
          >
            <a
              mat-tab-link
              *ngFor="let link of navLinks"
              [routerLink]="link.link"
              routerLinkActive
              #rla="routerLinkActive"
              [active]="rla.isActive"
            >
              <mat-icon>{{ link.icon }}</mat-icon>
              {{ link.label }}
            </a>
          </nav>
          <div class="ng-temp">
            <router-outlet></router-outlet>
          </div>
        </div>
      </div>
    <mat-drawer
        #drawer
        class="example-sidenav mat-elevation-z2"
        mode="side"
        position="end"
      >
<form [formGroup]="filterGroup" class="filter-fields">
some codes
</form>
    </mat-drawer>
    </mat-drawer-container>

ts 文件：

 this.drawerService.toggleDrawer$.subscribe(() => {
        this.drawer.toggle(); // Toggle the drawer
      });

这有一个获取数据的按钮

submitForm() {
this.dataService
        .fetchData(someParameters)
        .subscribe(
          (response) => {
              this.drawer.close(); //this closes the drawer then should update the mat-table in the component A.
            }
}

在数据服务中：

....this.dataSourceSubject.next(tmp_table);

抽屉关闭且toggleDrawer()完成后，我希望垫表也更新。 它仅在我转到其他选项卡时更新，因为该组件 A 位于 mat-tab 中。那是它刷新表格的时间。我也无法让它重新加载页面，因为预加载的数据将被再次获取。所以我只想更新表格。

Answer 1

我认为问题在于

BehaviourSubject

应该从 API 调用中发出最新数据，而不是以前的数据。

fetchData(someParameters): Observable<any[]> { 
    return this.service.GetData(enc_param).pipe( 
      map((response: any) => { 
        this.dataSourceSubject.next(response); // <- changed here!
        return tmp_ta 
      })
    );
}

问题也可能在于 mat-table 和组件 A 如何从您的

BehaviorSubject

接收数据。

---

异步管道

在你的服务中，确保你有一个BehaviorSubject的可观察对象。

dataSourceSubject: BehaviorSubject<any> = new BehaviorSubject<any>([]);
dataSourceObservable$!: Observable<any>;

constructor() {
  this.dataSourceObservable$ = this.dataSourceSubject.asObservable();
}

使用 getter 在组件上访问它，以便可以在 HTML 中使用。

get dataSource$ () {
    return this.dataService.dataSourceObservable$;
}

最后，当您使用此属性时，请使用异步管道。

<table mat-table [dataSource]="dataSource$ | async" class="mat-elevation-z8">

---

直接绑定。

与上面的方法相同，但是订阅并获取数据并发送到 mat-table。

ngOnInit() {
    this.sub.add(
       this.dataService.dataSourceObservable$.subscribe((data: any) => {
         this.data = data;
       })
    );
}

ngOnDestroy() {
    this.sub.unsubscribe();
}

最后当你直接使用这个属性时。

<table mat-table [dataSource]="data" class="mat-elevation-z8">