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

Question

我有验证码

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

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

我希望这很清楚。请询问是否需要进一步说明

Answer 1

要像您说的那样与ts文件通信，只需调用声明的函数

// In your ts.file

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

以及您的模板中

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

Answer 2

您可能应该在TS文件中循环变量ABC，然后再将其公开到html模板。注意这一事实。如果您在html中调用一个函数，它将被多次评估。

例如，以下将执行someFunction的次数比您可能需要的执行次数更多。

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

我建议创建您需要在html中读取的值作为其他变量。例如。

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

然后在模板中将其绑定到错误数组

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