Как показать DataSource, используя таблицу материалов, используя Angular 8

Question

Я использую Angular таблицу материалов, но я не знал, как отобразить источник данных на моем экране. Вот код, который я использую:

У меня Evento-table.component.ts запрашивающий данные с сервера:

  dataSource: EventoTableDataSource;

  eventos: Array<any> = new Array();

  constructor(private eventosService: EventosService) { }


  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
  displayedColumns = ['pais', 'regiao', 'sensor', 'timestampDt', 'valor', 'status'];

  ngOnInit() {
    this.listarEventos();
    this.dataSource = new EventoTableDataSource();
    console.log('dataSource', this.dataSource);
  }

  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
    this.table.dataSource = this.dataSource;
  }

  listarEventos() {
    this.eventosService.listarEventos().subscribe(eventos => {
      this.dataSource.data = eventos;
      return eventos;
    });
  }
}

И здесь я не знаю, как использовать источник данных для показать на мой взгляд:

evento-table-datasource.ts

// TODO: replace this with real data from your application
const EVENTOS: EventoTableItem[] = [{
  id: 1,
  pais: 'Brasil',
  regiao: 'Sudeste',
  sensor: '001',
  valor: 3000,
  status: 'Processado',
  timestampDt: '2019-06-19T00:00:00Z'
  }];

export class EventoTableDataSource extends DataSource<EventoTableItem> {
  data: EventoTableItem[] = EVENTOS;
  paginator: MatPaginator;
  sort: MatSort;

  constructor() {
    super();
  }

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

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

  disconnect() {}

  ...
}

А вот как я настраиваю визуализацию своей таблицы:

<table mat-table [dataSource]="eventos" class="full-width-table" matSort aria-label="Elements">

Answer 1

Когда вы используете connect, одна или все эти переменные не имеют значения и не определены.

data: EventoTableItem[] = EVENTOS;
paginator: MatPaginator;
sort: MatSort;

Так вот почему он говорит, что у connect есть неопределенное значение, потому что this.paginator.page не инициализирован.

Я предполагаю, что это потому, что вы запускаете connect раньше:

ngAfterViewInit() {


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

Существует ли конкретная c причина для помещения этого в ngAfterViewInit вместо ngOnInit ()?