Angular Material - 使用服务获取 mat-table 的一列的值

Question

情况

我有一张表，里面填满了来自接口 A 的数据。但是其中一列应该根据接口 A 的 id 填充接口 B 的过滤数据。

我尝试了什么

html:

<mat-table [dataSource]="dataSource">
    ...
    <ng-container matColumnDef="title">
        <mat-header-cell *matHeaderCellDef> Title</mat-header-cell>
        <mat-cell *matCellDef="let element"> {{getValueOfInterfaceB(element.id)}} </mat-cell>
    </ng-container>
    ...
</mat-table>

ts：

getValueOfInterfaceB(id: number){
    let filter: any = {Id: id}
    this.entrieService.getEntries(filter).subscribe((entries: Entry[]) => {
        console.log(entries);
    })
}

问题

如果我运行应用程序，这些行将反复执行。如果我不想一遍又一遍地运行代码，我将如何解决这个问题？

---

编辑：尝试@Eliseo 解决方案时出错

error TS2304: Cannot find name 'res'.
res[] => {

error TS1011: An element access expression should take an argument.
res[] => {

error TS1005: ',' expected.
res[] => {

error TS18004: No value exists in scope for the shorthand property 'res'. Either declare one or provide an initializer.
res.forEach((value,index)=>{

error TS2769: No overload matches this call.
res.forEach((value,index)=>{

Answer 1

向对象数组添加新属性比在 .html 中调用函数要好。如果“计算列”来自 API，您应该创建一个订阅数组（使用 map）并使用 forkJoin 订阅 obs 数组

我想你有一个数据数组[{Id:0},{Id:1}....]

你做了类似的东西

//create an array of obs
const obs$[]=this.dataarray.map(x=>this.entrieService.getEntries({Id:x.id})
//subscribe to forkJoin
forkJoin(obs).subscribe(res[]=>{
    //in res[0] you has the response to this.entrieService.getEntries({Id:0})
    //in res[1] you has the response to this.entrieService.getEntries({Id:1})
    ...
    //so you can iterate using forEach and index and make some like
    res.forEach((value,index)=>{
        this.dataarray[index].newProperty=value
    })
}

然后创建数据源。请记住，如果您有一个复杂的“列计算”，请在 ngOnInit 中只计算一次该列

Answer 2

你可以这样做：

entries: Entry[] = [];
getValueOfInterfaceB(id: number){
   if (this.entries.length)
        return entries;

    let filter: any = {Id: id}
    this.entrieService.getEntries(filter).subscribe((entries: Entry[]) => {
       this.entries = entries;
        console.log(entries);
    })
}

此外，您可以在 html 中添加异步管道

<mat-table [dataSource]="dataSource">
    ...
    <ng-container matColumnDef="title">
        <mat-header-cell *matHeaderCellDef> Title</mat-header-cell>
        <mat-cell *matCellDef="let element"> {{getValueOfInterfaceB(element.id) | async }} </mat-cell>
    </ng-container>
    ...
</mat-table>