Angular 11 中 *NgIf 的常见条件

Question

我正在使用 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 中各处对相同事物进行硬编码？

Answer 1

将其包装在组件中的函数中 class:

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>

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

Answer 2

还是推荐

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

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

Angular 11 中 *NgIf 的常见条件

Common conditions for *NgIf in Angular 11

angular-material

angular