Angular 8：如何将值从 *ngfor 发送到 TS 文件答案

【问题标题】：Angular 8 : How to send the value from *ngfor to TS fileAngular 8：如何将值从 *ngfor 发送到 TS 文件
【发布时间】：2020-09-20 02:28:47
【问题描述】：

我有代码

<div *ngFor="let a of ABC">
{{a.error}}
</div>

现在我想将 a 的值发送到我的 TS 文件。我想满足一些期望说'a.error == true'然后调用一些函数并将a的值分配给ts文件中的某个变量。

我希望它很清楚。请询问是否需要更多说明

【问题讨论】：

【解决方案1】：

如您所说，要与 ts 文件通信，您只需调用您声明的函数

// In your ts.file

someFunction(a: any) {
  // some amazing stuff
  return 'Hello World';
}

在你的模板中

<div *ngFor="let a of ABC">
  {{ someFunction(a) }}
</div>

【讨论】：

【解决方案2】：

您可能应该在 TS 文件中循环变量 ABC，然后再将其暴露给 html 模板。请注意这一事实。如果你在 html 中调用一个函数，它会被计算很多次。

例如，以下将执行someFunction 的次数可能超出您的需要。

//.html
<div *ngFor="let a of ABC">
{{someFunction(a)}}
</div>

我建议将您需要在 html 中读取的值创建为不同的 var。例如。

//.ts
ERR: string[];
ngOnInit() {
  this.ERR = ABC.map(a => someFunction(a));
}

然后在模板中只绑定错误数组

//.html
<div *ngFor="let a of ERR">
    {{a}}
</div>

【讨论】：