Блог

Компонент был создан с помощью схемы таблицы материалов Angular. Он обновляет источник данных при добавлении нового дочернего элемента в коллекцию баз данных Firebase в реальном времени:

   ngOnInit(): void {
    this.query = this.dbRef
      .orderByChild('timestamp')
      .startAt((new Date()).valueOf()); 

    this.query.on('child_added', data => this.dataSource.dataAdded(data.val()));
  }
 

Источник данных обновляет массив данных и передает Субъекту для запуска обновления таблицы.

   dataAdded(log: TestData): void {
    this.data.push(log);
    this.dataRefresh.next();
  }

  connect(): Observable<TestData[]> {
    if (this.paginator amp;amp; this.sort) {
      return merge(observableOf(this.data), this.paginator.page, this.sort.sortChange, this.dataRefresh)
        .pipe(
          map(() => {
          return this.getPagedData(this.getSortedData([...this.data ]));
        }));
    } else {
      throw Error('Please set the paginator and sort on the data source before connecting.');
    }
  }
 

Данные могут быть переданы непосредственно из компонента:

   pushData(): void {
    this.dbRef.push({
      timestamp: (new Date()).valueOf(),
      operation: 'test'
    });
  }
 

При вводе новых данных из другого окна браузера в таблицу добавляется новая строка, но без какого-либо содержимого. Строка отображается правильно только при наведении указателя мыши на заголовки или при нажатии на пагинатор.

При вводе новых данных из того же окна браузера таблица обновляется правильно.

Что мне нужно сделать, чтобы строки таблицы отображались правильно?

Github: https://github.com/dnlpva/angular-table-db2

В прямом эфире: https://test-3e0be.web.app/

Таблица материалов с двумя строками, не отображенными должным образом