在 angular mat-cell 上使用方法

Question

我想在 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 用于计算服务器端的值和 return 字符串。

问题是方法 getElementaryProcessComplexity 被调用了无限次。

有人可以帮助我吗？我想在服务器端计算一个值并在 mat-cell

中显示这个值

Answer 1

这将运行每次更改检测运行如果您想要一个可观察对象。

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

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

并在您的组件中将其公开为可观察对象

data$ = this.myService.getData();

并在模板中使用异步管道在数据可用后查看数据。

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

或者你可以有一个 returns 可观察到 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 创建一个单独的 observable

在 angular mat-cell 上使用方法

Using a method on a angular mat-cell

angular

mat-table