时间戳

首页 > 解决方案 > Angular Material 表无法正确呈现行

angular - Angular Material 表无法正确呈现行

问题描述

该组件是使用 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 && 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/

包含两行的材料表未正确呈现

标签： angularfirebase-realtime-databaseangular-materialangular-material-table

解决方案

推荐阅读