Angular Material - Mat-table 不显示来自 REST API 的数据

Question

我一直在尝试实现一个带有分页和排序的垫表，但没有运气。

我完全迷失了 datasource.ts 文件。

当我记录 this.dataSource.data 时，会显示数据，但是当我在 ngOnInit 中的 this.getUsers() 之后记录 this.dataSource.data 时，它会返回 undefined

account-list.component.ts

@Component({
  selector: 'app-account-list',
  templateUrl: './account-list.component.html',
  styleUrls: ['./account-list.component.css']
})
export class AccountListComponent implements OnInit {
  @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
  @ViewChild(MatSort, {static: false}) sort: MatSort;
  @ViewChild(MatTable, {static: false}) table: MatTable<AccountListItem>;
  dataSource: AccountListDataSource;
  data: User[];

  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
  displayedColumns = ['id', 'name'];

  constructor(private accountManagementService: AccountManagementService) {
  }

  ngOnInit() {
    this.dataSource = new AccountListDataSource();
    this.getUsers();
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  getUsers() {
    this.accountManagementService.getAllAccounts().subscribe((response:any) => {
      this.dataSource.data = response.content;
    });
  }

}

accountManagement.service.ts

getAllAccounts(): Observable<any> {
    return Observable.create(observer => {
      this.apiService.get({
        endPoint: `/${this.PREFIX}/`
      }).subscribe((responseData) => {
        observer.next(responseData);
      });
    });
  }

account-list-datasource.ts

export class AccountListDataSource extends DataSource<User> {
  data: User[] = [];
  paginator: MatPaginator;
  sort: MatSort;


  constructor() {
    super();
  }

  /**
   * Connect this data source to the table. The table will only update when
   * the returned stream emits new items.
   * @returns A stream of the items to be rendered.
   */
  connect(): Observable<User[]> {
    // Combine everything that affects the rendered data into one update
    // stream for the data-table to consume.
    const dataMutations = [
      observableOf(this.data),
      this.paginator.page,
      this.sort.sortChange
    ];

    this.paginator.length = this.data.length;

    return merge(...dataMutations).pipe(map(() => {
      return this.getPagedData(this.getSortedData([...this.data]));
    }));
  }

结果

Answer 1

解决了！我忘了在 html 模板中为 mat-table 设置 dataSource