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

Question

情况

我有一个 table 填充了来自接口 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

你可以这样做：

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>

Answer 2

向对象数组添加新的属性比调用 .html 中的函数更好。如果“计算列”来自 API，您应该创建一个订阅数组（使用地图）并使用 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

中仅计算一次列

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

Angular Material - Get value of one column for a mat-table using a service

typescript

angular-services

angular-material

angular