Question

在导入包含13.000个文档的大型数据库后，在角度材料表中显示数据时遇到了很大的延迟。我已经尝试将数据异步加载到表中，但是无法执行。有人可以指导我吗？

这就是我在组件中检索数据的方式。

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

   loadDocuments() {
    this._documentService.getDocuments().subscribe((data: Document[]) => {
      this.documents = data

      this.dataSource = new MatTableDataSource<Document>(this.documents );
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort
      this.sort.sort(<MatSortable>{
        id: 'name',
        start: 'asc'
      });

    })

  }

// searching function

  applyFilter(filterValue: string) {
     this.dataSource.filter = filterValue.trim().toLowerCase();
  }

我一直在检查一些示例，它们的作用是声明为可观察的数据源...但是我无法适应它。

//已编辑

在我的nodejs中，我有此代码

  documentsCtrl.getDocuments = (req, res) => {
    documentsModel.find().then((documents) => {
        res.json(documents)
    }).catch(err => {
        res.json(err)
    })
}

此功能仅在我的组件中查找所有要检索的文档。

此请求大约需要4000毫秒才能显示在我的客户端中

所以直到此请求完成...我还有其他功能可以在表中显示加载旋转...但是需要大约4或5秒才能显示数据（需要完成请求的时间）我该如何提高性能？

Answer 1

我在使用分页器和排序的Angular Material表中显示约10,000行时遇到类似的问题。查看this对另一个问题的答案。

关键要点是在分配{strong>之前之前设置MatPaginator 您的数据保存到MatTableDataSource。

将代码更改为以下内容：

this.documents = data;
// Initialize with an empty array so you don't get an error when setting the paginator
this.dataSource = new MatTableDataSource<Document>([]);

// Set paginator & sort
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;

// Finally assign the data
this.dataSource = new MatTableDataSource<Document>(this.documents);

带有角形材料表的异步数据源/角形7 / nodejs / mongodb

1 个答案: