Html 使用同一表达式计算多个指令的合适方法是什么？

我目前正在构建一个表，其中有一个特定的列，我需要在其中稍微处理de数据，以获得我想要显示的实际值；行对象中的值是一个ID号，因此我必须在变量中的对象数组中查找该ID

像这样：

findIndustry(industry: string) {
if (this.industries.find(x => x._id === parseInt(industry, 10))) {
  const industryResult = this.industries.find(x => x._id === parseInt(industry, 10));
  return `${industryResult.category} | ${industryResult.subcategory}`;
}
  return '(Not Set)';
}

得到结果后，我可以将其显示在表格上，如下所示：

<ng-container matColumnDef="parentName">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Industry </th>
      <td mat-cell *matCellDef="let client" class="industry-cell">{{ findIndustry(client.industry) }}</td>
</ng-container>

---

我读过，在角度模板中使用函数调用是个坏主意，因为它会在每次变化检测时运行函数，这可能会很多次；我想知道什么是避免多次运行该函数的有效方法，或者最好是完全避免使用该函数；我确实需要相同的值来应用不同的属性，这是我在每个指令和属性上使用它的唯一原因。

我喜欢做的是将它保存在一个大对象中，如下所示：

findIndustry() {
//
 this.object[x._id] =  `${industryResult.category} | ${industryResult.subcategory}`;
//
}

然后在模板中：

<ng-container matColumnDef="parentName">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Industry </th>
  <td mat-cell *matCellDef="let client" class="industry-cell">{{ object[client._id] }}</td>
</ng-container>

工业
{{object[client.\u id]}

---

我希望它不要太抽象（如果你有一个stackblitz实现，它会有所帮助）。

正如你所说的，在html中使用函数是一个非常糟糕的主意…

下面是一篇关于如何在html中调用函数的文章

角型消化循环 摘要循环是Angular的自动更新魔法的工作原理——这就是为什么在输入框中键入内容会自动更新任何引用其值的内容。

当摘要循环运行时，它会有效地重新绘制页面上可能已更改的所有内容。

Angular使用一些技巧来发现“可能已经改变的一切”，主要的技术是观察者。当您使用指令（如

ngif

和

ngclass

）以及绑定（如

{{yourBindingHere}}

）时，会自动创建这些观察程序

这些东西中的每一个都有一个观察者当Angular的摘要循环运行时，每个观察者都被要求更新其状态。对于ng类，它将重新运行绑定到它的函数，以查看是否需要更改任何内容这就是为什么您的控制器功能会运行多次，并且每次页面上发生变化时，它都会再次运行。
来源

反应式编程用于救援 Angular在默认情况下预装了

rxjs

。我们可以利用

可观测值的力量来解决这个问题

我们可以实现类似于


用数据定义一个可观察的对象
定义另一个可观察对象以跟踪行业id
将两个观察值组合起来
订阅结果
可观察的

定义触发行业id更改的方法

用数据定义一个可观察的对象
在许多情况下，这只是来自http请求的响应

industries$=this.http.get（'some/api'））

我们还可以使用
from
和
of
操作符从
rxjs

industries:IIndustries[]=[{…}，{…}，…]
行业$=的（本行业）

定义另一个可观察对象以跟踪行业id
下一步是定义跟踪所选行业的方法。我将使用一个
BehaviorSubject
，它将在初始加载时发出一个值，每次调用
主题上的
next（）
函数

selectedsubject$=newbehaviorsubject（1）//默认情况下将选择1
selectedId$=this.selectedSubject$.asObservable（）

将两个观察值组合起来
接下来，我们需要将这两个
观测值组合起来。我们将使用
rxjs
从官方文件

当您有多个长寿命的观测值，这些观测值在某些计算或确定中相互依赖时，最好使用此运算符

来源

industry$=CombineTest（[this.industries$，this.selectedId]）.pipe(
地图（（[行业，行业]）=>{
if（industries.find（x=>x._id==parseInt（industries，10）））{
const industryResult=industries.find（x=>x._id==parseInt（industry，10））；
返回`${industryResult.category}${industryResult.subcategory}`；
}
返回“（未设置）”；
}
})
)

我们正在管道化
Observable
流，并使用
rxjs/operators
中的
map
操作符来转换数据

差不多完成了，订阅结果
Observable
我们将使用
async
管道来实现此目的


工业
{{industry$| async}}

最后定义触发行业id更改的方法
为了触发所选项目的更改，我们只需调用
主题上的下一个方法

changeSelectedId（id）{
此。SelectedSubject$。下一步（id）
}

使用上述方法，仅当调用
changeSelectedId（）
函数时才会触发角度变化检测

<ng-container matColumnDef="parentName">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Industry </th>
  <td mat-cell *matCellDef="let client" class="industry-cell">{{ object[client._id] }}</td>
</ng-container>