重定向后未显示角度材料表数据

问题描述

我有一个父级组件[route：../ register：user_id]。

“物料对话框”用于从用户那里获取搜索参数（期间以及所选期间的销售额是按个人/每日还是按月显示）。

提供搜索参数并执行onSubmit后，我想打开一个子组件并在其中显示获取的数据（有3个子组件分别用于个人/每日和每月视图）。

我第一次执行搜索时，数据已成功获取但未显示。如果再次运行查询，现在已经在子组件的路径上（例如：../ register：user_id / daily），数据将按预期显示。

对话框TS

onSubmit(value: any): void {
  //
  //
  //
  this.registerService.emitData({ user_id,shop_id,start_date,end_date } as RegisterQuery);
  this.router.navigate(['register/',user_id,endpoint]);
  this.dialogRef.close();
}

注册服务

observer = new Subject();
public subscriber$ = this.observer.asObservable();

emitData(params) {
  this.observer.next(params);
}

每日注册组件

ngAfterViewInit(): void {
  this.registerService.subscriber$.subscribe(params => {
    console.log('Received',params);
    this.getDailySales(params,'daily');
  });
}

getDailySales(params,endpoint): void {
  this.registerService.getSales(params,endpoint)
    .subscribe(sales => {
      this.dataSource = new MatTableDataSource(sales);
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;
      console.log(sales);
    });
}

解决方法

对dataSource的引用保持不变，因此资料不知道您的源已更改。

尝试一下this.dataSource = [...this.data];

或使用BehaviorSubject，例如：

dataSource = new BehaviorSubject([]);

onAdd($event){
  this.data.push({name: this.currentText});
  console.log(this.data);
  this.dataSource.next(this.data);
}