Question

我正在尝试构建有角度的应用来进行生产。我将数据网格用作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

类型“ MatTableDataSource”上不存在属性“ loading $”

1 个答案: