Angular 使用角垫工作台时在控制台上观察到错误

我正在使用angular和angular材质创建一个。 一切正常。只是我在控制台中看到了一个错误，我不知道如何纠正它。我再次看到我的数据被加载，分页工作正常，但我确实在控制台上发现了一个我不希望看到的错误。我怎样才能纠正这个问题

控制台上的错误：

MessageDataTableDataSource.ts

import { DataSource } from '@angular/cdk/collections';
import { MatPaginator, MatSort } from '@angular/material';
import { map } from 'rxjs/operators';
import { Observable, of as observableOf, merge } from 'rxjs';
import { MessageData } from '../../data-model/MessageData';

export class MessageDataTableDataSource extends DataSource<MessageData> {

  constructor(private paginator: MatPaginator, 
    private sort: MatSort, private data: MessageData[]) {
      super();
  }

  connect(): Observable<MessageData[]> {
    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]));
    }));
  }

  disconnect() {}

  private getPagedData(data: MessageData[]) {
    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
    return data.splice(startIndex, this.paginator.pageSize);
  }

  private getSortedData(data: MessageData[]) {
    if (!this.sort.active || this.sort.direction === '') {
      return data;
    }

    return data.sort((a, b) => {
      const isAsc = this.sort.direction === 'asc';
      switch (this.sort.active) {
        case 'id': return compare(+a.Message.Id, +b.Message.Id, isAsc);
        default: return 0;
      }
    });
  }
}

function compare(a, b, isAsc) {
  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}

期待友好的建议。

---

谢谢

您可以使用

*ngIf

或

安全导航操作符（？）来处理此错误。

<mat-paginator #paginator
        [length]="dataSource?.data?.length" 
        [pageIndex]="0"
        [pageSize]="5"
        [pageSizeOptions]="[5, 10, 50, 100]">
</mat-paginator>

原因： 这只是在组件上设置实际值之前，尝试访问模板中的数据源时发生的控制台错误。这是因为数据是异步分配的

解决方案：

<mat-paginator #paginator
        [length]="dataSource?.data?.length" 
        [pageIndex]="0"
        [pageSize]="5"
        [pageSizeOptions]="[5, 10, 50, 100]">
</mat-paginator>

---

将

dataSource.data.length

更改为

dataSource？.data.length

。数据源是异步设置的，因此将在未定义的情况下启动生命。

？

是空安全运算符，仅当

数据源

不是空/未定义时才会尝试读取

数据

<mat-paginator #paginator
        [length]="dataSource?.data?.length" 
        [pageIndex]="0"
        [pageSize]="5"
        [pageSizeOptions]="[5, 10, 50, 100]">
</mat-paginator>