如何在首次加载时从Observable填充matTableDataSource

问题描述

我在启动时填充matTableDataSource遇到麻烦。在启动时，我得到带有* matNoDaTarow消息的空表。当我单击任意列的排序或在过滤器输入中键入任何内容时，数据将立即显示。

我尝试对表行使用硬编码的值，并且效果很好。一切都在启动时加载。我在这里有一个有效的stackblitz示例，在其中复制了除订阅以外的所有内容，因为它从数据库中获取值： StackblitzExampleOfHardcodedArray

我还试图在服务中填充数组，并在（完成）之后在组件中调用它，但是它也没有显示行。

这是我的原始方法

parseUserData: any;
returnValue: any = [];
getAllBooksFromDatabase() : BooksData[] { //all books from Bookshelf
  this.returnValue.splice(0,this.returnValue.length);
  this.data.getBooks().subscribe((data: any) => {
  this.parseUserData = JSON.parse(JSON.stringify(data));
  this.parseUserData.map((item:any) => {
    if(item.fine != 0){
        this.returnValue.push(
          {
            uid: item.uid,bid: item.bid,bookTitle: item.bookTitle,authorLastName: item.authorLastName,authorFirstName: item.authorFirstName,issuedDate: item.issuedDate,period: item.period,fine: item.fine,warning: item.warning
          }
       );
    }
})
return this.returnValue;
}

编辑：这是我获取数据的服务方法

public getBooks(): Observable<any> {
return this.http.get('http://localhost:8080/books')
  .pipe(map((books: any) => books));
}

编辑：这是结果的一部分-图书：

    [
  {
"warning": "","issuedDate": "in library","period": "0","bookTitle": "Balade Petrice Kerempuha","bid": "158744286","fine": "0","authorLastName": "Krleža","authorFirstName": "Miroslav","bookGenre": "poetry","uid": ""
  },{
"warning": "","bookTitle": "Na rubu pameti","bid": "653621302","uid": ""
 },"period": null,"bookTitle": "Kule u zraku","bid": "746388428","fine": null,"authorLastName": "larsson","authorFirstName": "Stieg","bookGenre": "triler","uid": null
 },"issuedDate": "borrowed","period": "1","bookTitle": "U zemlji klanova","bid": "542455118","authorLastName": "Rudan","authorFirstName": "Igor","bookGenre": "popularization of science","uid": "0231027834"
 },"bookTitle": "Točna boja neba","bid": "542455578","bookTitle": "Očekujući vatre","bid": "548754578","bookTitle": "Zao zrak","bid": "548755578","uid": ""
 }
 ]

如何在启动时显示所有表行？ 欢迎任何建议。预先感谢！

解决方法

library(survival) library(survminer) library(dplyr) # Create fake development dataset ov_dev <- ovarian[1:13,] # Create fake validation dataset ov_val <- ovarian[13:26,] # Run cox model fit.coxph <- coxph(Surv(futime,fustat) ~ rx + resid.ds + age + ecog.ps,data = ov_dev) p <- log(predict(fit.coxph,newdata = ov_val,type = "expected")) p #> [1] 0.4272783 -0.1486577 -1.8988833 -1.1887086 -0.8849632 -1.3374428 #> [7] -1.2294725 -1.5021708 -0.3264792 0.5633839 -3.0457613 -2.2476071 #> [13] -1.6754877 -3.0691996 变量是异步分配的。因此，当您退货时，它仍然是空的。相反，您可以使用RxJS map运算符以及Array map和filter函数来修改数据，然后直接在this.returnValue挂钩中分配它们。

尝试以下

ngOnInit

有关异步数据here的更多信息。

,

尝试一下

  ngOnInit() {
    this.data
      .getBooks()
      .pipe(
        filter((data) => !!data),map((data: any[]) => {
          data.map((item: any) => {
            if (item.fine != 0) {
              return {
                uid: item.uid,bid: item.bid,bookTitle: item.bookTitle,authorLastName: item.authorLastName,authorFirstName: item.authorFirstName,issuedDate: item.issuedDate,period: item.period,fine: item.fine,warning: item.warning,};
            }
          });
        })
      )
      .subscribe((books: BooksData) => {
        this.dataSourceBook = new MatTableDataSource(books);
        this.dataSourceBook.paginator = this.paginator;
        this.dataSourceBook.sort = this.sort;
      });
  }