如何异步获取mat表每一行的数据答案

【问题标题】：how to get data for each row of the mat table asynchronously如何异步获取mat表每一行的数据
【发布时间】：2021-04-22 17:43:19
【问题描述】：

我正在使用垫子，

表格每一行有八列，给表格的数据源只填满表格每一行的4列，对于每一行剩下的4列我们要请求另一个api，在它的api中，每行的id也必须发送

谁能指导我？

【问题讨论】：

你能提供一些匿名代码吗？到目前为止你有什么？

标签： angular api asynchronous angular-material mat-table

【解决方案1】：

您需要创建一个包含所有列的数据。所以你应该使用 rxjs 操作符：switchMap、forkJoin 和 map

假设您有一个具有两个功能的服务

  list()  //return an observable of array of items
  read(id) //return an element given an "id"

您可以在服务中创建一个返回列表的函数，但与“读取”的所有属性互补

  readFull()
  {
    return this.list().pipe(switchMap((res:any[])=>{
        return forkJoin(res.map((x:any)=>this.read(x.id).pipe(
          map((more:any)=>({...x,...more})
        ))))
    }))
  }

这有点复杂，我试着解释一下。首先想象你有一个对象

x={id:1,name:"one"}
//when you make
this.read(x.id).pipe(
   map((more:any)=>{
      return {...x,...more}
   })
)

你得到一个对象，它具有“x”的所有属性以及从 this.read() 接收到的所有属性

好吧，假设您没有一个对象，而是一个对象数组。您可以将对象数组转换为可观察对象数组

res=[{id:1,name:"one"},{id:2,name:"two"}]

res.map((x:any)=>the before function

当我们拥有一组可观察对象时，我们可以使用 forkJoin 将所有对象连接在一起

forkJoin(..the array of observables..)

好吧，首先我们得到“列表”，但我们对“列表”不感兴趣，否则 forkjoin 创建的 observable。为此我们需要使用 switchMap

当我使用“of”“模拟”阅读和列出时，您可以在this stackblitz 中看到这个概念

【讨论】：