angular - 如何使用带有异步管道和变化检测的 Material 表？ (工作不正常)

Question

我花了大约 3 天的时间试图弄清楚这一点。

预期行为: Material 表始终使用来自后端的最新数据进行渲染。当一个新项目从一个单独的组件添加到表中时，重定向到页面的路由器会显示更新的数据。

实际行为:第一次导航到页面时，表格是空的。表格已呈现，列标题已呈现，但未填充行。导航离开然后返回会正确填充表格。向表中添加新项目时，服务会将项目发送到后端，然后调用所有项目。然后该服务更新商店(另一个服务)。在重定向到表格组件时，表格似乎会快速闪烁旧数据，然后再次显示为空白。一旦我离开并返回，表格就会正确加载。

我将下面的异步管道与服务一起使用。这对我来说似乎不正确......此外，ngOnChanges 没有记录任何内容。

appStore.service.ts

private _pets: ReplaySubject<Pet[]> = new ReplaySubject(1);
public readonly pets: Observable<Pet[]> = this._pets.asObservable();
getPets(): Observable<Pet[]> {
    return this.pets;
}

appDispatch.service.ts

public getPets(): Observable<Pet[]> {
    return this.appStore.getPets();
}

private setPets(pets: Pet[]) {
    this.appStore.setPets(pets);
}

petTableComponent.component.ts

...
changeDetection: ChangeDetectionStrategy.OnPush

constructor(private appDispatch: AppDispatchService,
              private router: Router) {
}

ngOnChanges(changes: SimpleChanges): void {
    console.log(changes.value.currentValue);
}

petTableComponent.component.html

<table
  mat-table
  [dataSource]="appDispatch.getPets() | async" multiTemplateDataRows
  class="mat-elevation-z8">

    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef scope="col" [attr.role]="null"> <h4>Name</h4></th>
      <td mat-cell *matCellDef="let element" scope="row" [attr.role]="null">
        <p>{{element.pet.name}}</p>
      </td>
    </ng-container>
    ...

编辑
我尝试根据请求更改以下内容，结果与以前完全相同。

//changeDetection: ChangeDetectionStrategy.OnPush

pets-table.component.ts

constructor(private appDispatch: AppDispatchService,
              private router: Router,
              private cdr: ChangeDetectorRef) {
  }

  ngOnChanges(changes: SimpleChanges): void {
    console.log(changes.value.currentValue());
  }

  ngOnInit(): void {
    this.subscription = this.appDispatch.getReleaseItems()
      .subscribe(value => {
        this.data = value;
        this.cdr.detectChanges();
      });
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }

我将数据源更改为 [dataSource]="data"
没有把握...

Answer 1

这是因为你设置了ChangeDetectionStrategy.OnPush这意味着你的组件认为你只依赖你的 @input属性，因此只有在更改这些值或从组件或其子组件引发 DOM 对象事件时才会进行更改检测。

看看这篇文章，它有一个很好的例子解释:https://netbasal.com/a-comprehensive-guide-to-angular-onpush-change-detection-strategy-5bac493074a4

您还可以手动运行更改检测:

constructor(private cdr: ChangeDetectorRef, private appDispatch: AppDispatchService) {
  ......
  this.appDispatch.Pets.subscribe(() => {
    this.cdr.detectChanges();  
  })
  

}