Angular 11 中 *NgIf 的常见条件

问题描述

我正在使用 angular 11 开发前端，并且有多个地方我需要在相同条件下应用 *ngIf，

<mat-option *ngIf="horizontalStepperForm.value.step2.companyType == 'Head_Office'" value="Light">Light</mat-option>
<mat-option *ngIf="horizontalStepperForm.value.step2.companyType == 'Head_Office'" value="Basic">Basic</mat-option>
<mat-option *ngIf="horizontalStepperForm.value.step2.companyType == 'Head_Office'" value="Professional">Professional</mat-option>
                  

这些值是从 FormGroup 中捕获的，是否有任何方法可以使用一种方法来减少对 HTML 中任何地方的相同内容的硬编码？

解决方法

将其包裹在组件类中的一个函数中：

isCompanyTypeHeadOffice() {
    return horizontalStepperForm.value.step2.companyType == 'Head_Office'
}

然后你可以这样做：

<mat-option *ngIf="isCompanyTypeHeadOffice()" value="Light">Light</mat-option>
<mat-option *ngIf="isCompanyTypeHeadOffice()" value="Basic">Basic</mat-option>
<mat-option *ngIf="isCompanyTypeHeadOffice()" value="Professional">Professional</mat-option>

我们经常做这件事；不仅仅是针对重复条件，而且我考虑将模板中的逻辑保留为反模式。最好将该逻辑放在组件类中，以便更轻松地进行单元测试。

,

我还是推荐它

 get bool():boolean{
    return this.horizontalStepperForm.value.step2.companyType == 'Head_Office'
  }

<mat-option *ngIf="bool" value="Light">Light</mat-option>