Свойство 'loading $' не существует для типа 'MatTableDataSource'

Question

Я пытаюсь собрать приложение angular для прод. Я использовал для сетки данных как MatTableData.

. Я получаю сообщение об ошибке при попытке выполнить сборку с ng build --prod, как показано ниже:

Property 'loading$' does not exist on type 'MatTableDataSource'

Вот как я реализую в компонент:

public dataSource = new MatTableDataSource<Employee>();

ngOnInit(){

this.repository.getData(`employee/list`).subscribe(
  res => {
    this.dataSource.data = res as Employee[];
  }
)

}

Выдает эту ошибку в шаблоне:

<div class="mat-table__bottom">
    <!-- MATERIAL SPINNER | Url: 'https://material.angular.io/components/progress-spinner/overview' -->
    <mat-spinner [diameter]="20" *ngIf="dataSource.loading$ | async"></mat-spinner>
    <!-- MATERIAL PAGINATOR | Binded to dasources -->
    <!-- See off.documentations 'https://material.angular.io/components/paginator/overview' -->
    <mat-paginator [pageSize]="10" [pageSizeOptions]="[3, 5, 10]" [length]="dataSource.paginatorTotal$ | async"
        [showFirstLastButtons]="true"></mat-paginator>
</div>

Так как же я могу исправить эту ошибку?

Спасибо

Answer 1

MatTableDataSource не имеет loading$ свойства. Чтобы исправить это, вам нужно объявить и обработать loading$ тему в вашем компоненте:

public dataSource = new MatTableDataSource<Employee>();
public loading$ = new Subject<boolean>();

Затем выдать значения при загрузке данных:

ngOnInit(){
  this.loading$.next(true);
  this.repository.getData(`employee/list`)
    .pipe(finalize(() => this.loading$.next(false)))
    .subscribe(
      res => {
        this.dataSource.data = res as Employee[];
      }
    )
}

И, наконец, при смене шаблона dataSource.loading$ на loading$

Дополнительная информация:

При использовании ng build --prod выполняются дополнительные проверки типов, и вы получаете ошибку, тогда как в обычном ng serve ваш loading$ всегда обрабатывается как undefined