angular - 以 Angular 从html模板设置 typescript 变量的值

Question

如何在 HTML 模板中将表达式值设置为 typescript 局部变量我正在尝试将表达式值分配给这样的变量:

<span *ngIf="IsRangeValidate = !(section.FOFormFieldList[fieldIndex].FOFormFieldResponseText>=fieldInfo.MinVal && section.FOFormFieldList[fieldIndex].FOFormFieldResponseText<=fieldInfo.MaxVal)" class="text-danger">Value should be between {{fieldInfo.MinVal}} - {{fieldInfo.MaxVal}}</span>

表达式将返回真/假值。IsRangeValidate 是 TypeScript bool 变量，我想从 HTML 模板将表达式结果分配给该变量

Answer 1

如果您想在 IsRangeValidate 中存储实际值。您可以在组件中创建一个 getter 并使用它。

 get isRangeValidate() {
   const text = this.section.FOFormFieldList[fieldIndex].FOFormFieldResponseText;
   return text >= this.fieldInfo.MinVal && text <= this.fieldInfo.MaxVal)
 }

然后在你的模板中使用这个 getter:

 <span *ngIf="isRangeValidate" class="text-danger">Value should be between {{fieldInfo.MinVal}} - {{fieldInfo.MaxVal}}</span>

希望这个回答对您有所帮助。