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

我在启动时填充matTableDataSource时遇到问题。启动时，我得到带有*matNoDataRow消息的空表。当我在任何列上单击排序或在过滤器输入中键入任何内容时，数据立即出现

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

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

这是我原来的方法

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

如何在启动时显示所有表行？

---

欢迎任何建议。提前谢谢

异步分配

this.returnValue

变量。所以当你归还它的时候，它还是空的。您可以使用RxJS操作符以及数组和函数修改数据，并直接在

ngOnInit

hook中分配数据

试试下面的方法

ngOnInit（）{
这是.getAllBooksFromDatabase（）.subscribe(
书籍=>{
this.dataSourceBook=新MatTableDataSource（books）；
this.dataSourceBook.paginator=this.paginator；
this.dataSourceBook.sort=this.sort；
}
);
}
getAllBooksFromDatabase（）：可观察的{///书架上的所有书籍
返回此.data.getBooks（）管道(
地图（数据=>{
返回数据
.filter（item=>item.fine！=0）//{
返回{
uid:item.uid，
投标文件：item.bid，
bookTitle:item.bookTitle，
authorLastName:item.authorLastName，
authorFirstName:item.authorFirstName，
发布日期：item.issuedDate，
期间：项目。期间，
好的，好的，
警告：item.warning
}
})
})
);
}

有关异步数据的详细信息。

试试这个

ngOnInit（）{
这是数据
.getBooks（）
.烟斗(
过滤器（（数据）=>！！数据），
地图（（数据：any[]）=>{
data.map（（项目：任意）=>{
如果（item.fine！=0）{
返回{
uid:item.uid，
投标文件：item.bid，
bookTitle:item.bookTitle，
authorLastName:item.authorLastName，
authorFirstName:item.authorFirstName，
发布日期：item.issuedDate，
期间：项目。期间，
好的，好的，
警告：item.warning，
};
}
});
})
)
.订阅（（图书：BooksData）=>{
this.dataSourceBook=新MatTableDataSource（books）；
this.dataSourceBook.paginator=this.paginator；
this.dataSourceBook.sort=this.sort；
});
}

您需要显示如何从后端获取值。不是实际的数据，而是如何获取数据。

    [
  {
"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": ""
 }
 ]