angular - 物料表 - 无法正确实施

Question

我正在尝试使用此处Table retrieving data through HTTP的示例中的 mat table

<table mat-table [dataSource]="data" matSort matSortActive="created" matSortDisableClear matSortDirection="desc">
  <!-- firstname Column -->
  <ng-container matColumnDef="firstname">
    <th mat-header-cell *matHeaderCellDef>Vorname</th>
    <td mat-cell *matCellDef="let row">{{row.firstname}}</td>
  </ng-container>
</table>

export class AccessManagerComponent implements OnInit {

  displayedColumns = ['firstname'];
  data: Observable<any>;

  @ViewChild(MatSort) sort: MatSort;

  constructor(
    private backendService: BackendService
  ) { }

  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
    this.data = this.sort.sortChange.pipe(
      startWith({}),
      switchMap(() => {
        return this.backendService.getUsers(this.sort.active, this.sort.direction)
      }),
      tap(console.log),
      map(response => response.items)
    )
  }
}

它正在工作，但是我收到错误ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.，因为sort仅在视图初始化后才初始化。

sort只要表没有被渲染，就不会被初始化，但是一旦表被渲染，我就会得到这个错误，因为它会触发一个新的提取（它应该）。

如果我在组件内部订阅并设置data在那里，我能够解决这个问题，但是找到一个允许我使用 observable 作为 mat 表的数据源的解决方案会很好。

标签： angularrxjsangular-material