在有角垫电池上使用方法

编程问答 2022-08-16

问题描述

我想在mat-cell内调用一个方法：

<ng-container matColumnDef="complexity">
<th mat-header-cell *matHeaderCellDef> Complexidade</th>
<td mat-cell *matCellDef="let ep"> {{ getElemenaryProcessComplexity(ep) }} </td>
</ng-container>

getElementaryProcessComplexity方法用于在服务器端计算值并返回字符串。

问题在于方法getElementaryProcessComplexity被称为无限次。

enter image description here

有人可以帮我吗？ 我想在服务器端计算一个值，并在mat-cell中显示该值

解决方法

这将在每次您希望观察到变化检测运行时运行。

在您的服务中，有一个方法可以从http调用中返回可观察到的结果。

getData() => this.http.get('dataUrl');

并在您的组件中将其公开显示为可观察到的

data$ = this.myService.getData();

并在模板中使用异步管道查看数据（一旦可用）。

<td mat-cell *matCellDef="let ep"> {{ data$ | async }} </td>

或者您可以使用返回ep

的可观察值的管道 
@Pipe({
  name: 'getElemenaryProcessComplexity'
})
export class GetElemenaryProcessComplexityPipe implements PipeTransform {
  constructor(private http: HttpClient) {}

  transform(ep): Observable<EpType> {
    return this.http.get('url/' + ep);
  }
}

并在模板中使用它

<td mat-cell *matCellDef="let ep"> {{ ep | getElemenaryProcessComplexity | async }} </td>

管道只会为每个ep创建一个可观察的

angularangularmat-table