Ошибка: невозможно установить свойство 'paginator' из неопределенного

Question

Я создаю таблицу угловых материалов, используя этот пример: https://github.com/marinantonio/angular-mat-table-crud. Образец подключается к таблице с помощью {DataSource} из'@angular/cdk/table'.

Для моего проекта ямне нужно использовать MatTableDataSource из '@ angular / material' в качестве соединителя данных таблицы, как только я изменяю код для использования MatTableDataSource, я продолжаю получать TypeError: Невозможно установить свойство 'paginator' из неопределенного .

Есть репродукция для моей проблемы https://stackblitz.com/edit/angular-3rhawr

Что я делаю не так?Любая помощь будет оценена.

Answer 1

this.exampleDatabase.getAllIssues() носит асинхронный характер и может потребовать времени для завершения.Но ngAfterViewInit будет вызван до этого.А поскольку dataSource установлено в блоке subscribe для this.exampleDatabase.getAllIssues(), отсюда и ошибка.

Исправьте ее, переместив код из ngAfterViewInit в блок subscribe.Примерно так:

public loadData() {
  this.exampleDatabase = new DataService(this.httpClient);
  this.exampleDatabase.getAllIssues().subscribe(data => {
    this.dataSource = new MatTableDataSource(data);
    this.dataSource.data = data;
    this.dataLength = data.length;

    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  });
}

Вот Рабочий образец StackBlitz без ошибки для вашей ссылки.