Angular 5 {{}} 计算 html

Question

我正在尝试将利润添加到我的数据表中，这将是收入减去成本。

现在我的代码在 html 上看起来像这样。

<ng-container matColumnDef="margin">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Margin</mat-header-cell>
      <mat-cell *matCellDef="let project">{{project.revenue - project.cost}}</mat-cell>
</ng-container>

该应用显示了正确的数字，但我无法按升序或降序对列进行排序。我猜是因为我在 HTML 中计算它。我该如何解决这个问题？

Answer 1

您可以在 controller 中进行计算。

您使用的方法不是推荐的方法，因为每次更改检测都会发生上述计算。但是这个值可能只改变一次或在特定操作上改变。所以在控制器中处理这个会避免这种情况并提高性能。

Angular 5 {{}} 计算 html

Angular 5 {{}} calculation in html

datatable

calculation

angular