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

Question

我在启动时无法填充 matTableDataSource。在启动时，我得到空 table 和 *matNoDataRow 消息。当我在任何列上单击排序或在过滤器输入中键入任何内容时，数据会立即出现。

我尝试对 table 行使用硬编码值，但效果很好。一切都在启动时加载。我在这里有一个有效的 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": "",
"issuedDate": "in library",
"period": "0",
"bookTitle": "Na rubu pameti",
"bid": "653621302",
"fine": "0",
"authorLastName": "Krleža",
"authorFirstName": "Miroslav",
"bookGenre": "poetry",
"uid": ""
 },
 {
"warning": "",
"issuedDate": "in library",
"period": null,
"bookTitle": "Kule u zraku",
"bid": "746388428",
"fine": null,
"authorLastName": "Larsson",
"authorFirstName": "Stieg",
"bookGenre": "triler",
"uid": null
 },
 {
"warning": "",
"issuedDate": "borrowed",
"period": "1",
"bookTitle": "U zemlji klanova",
"bid": "542455118",
"fine": "0",
"authorLastName": "Rudan",
"authorFirstName": "Igor",
"bookGenre": "popularization of science",
"uid": "0231027834"
 },
 {
"warning": "",
"issuedDate": "borrowed",
"period": "1",
"bookTitle": "Točna boja neba",
"bid": "542455578",
"fine": "0",
"authorLastName": "Rudan",
"authorFirstName": "Igor",
"bookGenre": "popularization of science",
"uid": "0231027834"
 },
 {
"warning": "",
"issuedDate": "in library",
"period": "0",
"bookTitle": "Očekujući vatre",
"bid": "548754578",
"fine": "0",
"authorLastName": "Rudan",
"authorFirstName": "Igor",
"bookGenre": "popularization of science",
"uid": ""
 },
 {
"warning": "",
"issuedDate": "in library",
"period": "0",
"bookTitle": "Zao zrak",
"bid": "548755578",
"fine": "0",
"authorLastName": "Rudan",
"authorFirstName": "Igor",
"bookGenre": "popularization of science",
"uid": ""
 }
 ]

如何在启动时显示所有 table 行？欢迎任何建议。提前致谢！

Answer 1

this.returnValue 变量被异步赋值。所以当你归还它时，它仍然是空的。您可以改为使用 RxJS map operator along with Array map and filter 函数修改您的数据，并直接在 ngOnInit 挂钩中分配它。

尝试以下方法

ngOnInit() {
  this.getAllBooksFromDatabase().subscribe(
    books => {
      this.dataSourceBook = new MatTableDataSource(books);
      this.dataSourceBook.paginator = this.paginator;
      this.dataSourceBook.sort = this.sort;
    }
  );
}

getAllBooksFromDatabase(): Observable<BooksData[]> { // all books from Bookshelf
  return this.data.getBooks().pipe(
    map(data => {
      return data
        .filter(item => item.fine != 0)        // <-- your condition
        .map(item => {
          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
          }
        })
      })
  );
}

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

Answer 2

试试这个

  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;
      });
  }

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

How to populate matTableDataSource from Observable on first loading

observable

typescript

angular

mat-table