如何在 Angular 8 中实现嵌套的 NG If else 条件答案

【问题标题】：How to Implement Nested NG If else conditions in Angular 8如何在 Angular 8 中实现嵌套的 NG If else 条件
【发布时间】：2019-08-16 07:37:22
【问题描述】：

我需要什么

        if(field.ajax && field.ajax='Y' && field.multiple&& field.multiple=='Y')
        {

        }
        else if (field.ajax && field.ajax='Y' && field.multiple&& field.multiple=='N'))
        {
        }
        else
        {
        }

适用于 2 个条件工程

    if(cond)
        {
        code
        }else
        {
        code
        }

此案例代码有效

   <ng-container *ngIf="field.ajax && field.ajax === 'Y'; else select2ElseBlock">
              <ng-select
              [items]="data"
              multiple="true"
              bindLabel="name"
              [closeOnSelect]="true"
              [loading]="loading"

              [searchable]="true"
              [clearable]="true" 
              (click)="clearModel()"
              (keyup)="changed($event.target.value)">
              </ng-select>
        </ng-container>
       <ng-template #select2ElseBlock>
              <ng-select
              [items]="field.choices.choice"
              multiple="true"
              bindLabel="name"
              [loading]="loading"
              >
              </ng-select>
        </ng-template>

我尝试了多个案例

但是这种情况会产生问题

 <ng-container *ngIf="field.ajax && field.ajax === 'Y'  then  select2thenBlock else select2ElseBlock">
          <ng-select
          [items]="data"
          multiple="true"
          bindLabel="name"
          [closeOnSelect]="true"
          [loading]="loading"

          [searchable]="true"
          [clearable]="true" 
          (click)="clearModel()"
          (keyup)="changed($event.target.value)">
          </ng-select>
    </ng-container>
     <ng-template #select2thenBlock>
          <ng-select
          [items]="field.choices.choice"
          multiple="true"
          bindLabel="name"
          [loading]="loading"
          >
          </ng-select>
    </ng-template>
   <ng-template #select2ElseBlock>
          <ng-select
          [items]="field.choices.choice"
          multiple="true"
          bindLabel="name"
          [loading]="loading"
          >
          </ng-select>
    </ng-template>

但是对于多案例创建问题。

如何在 Angular 8 中实现嵌套 if else 条件。

参考

https://angular.io/api/common/NgIf

【问题讨论】：

有什么问题？
在多个条件下更新问题问题。我也需要检查条件的地方

标签： angular if-statement angular8

【解决方案1】：

你只是在逻辑上嵌套条件：

<ng-container *ngIf="field?.ajax === 'Y'; else ajaxNotY">
  <ng-container *ngIf="field?.multiple === 'Y'; else multipleNotY">
    AJAX AND MULTIPLE Y
  </ng-container>
  <ng-template #multipleNotY>MULTIPLE NOT Y</ng-template>
</ng-container>
<ng-template #ajaxNotY>AJAX NOT Y</ng-template>

【讨论】：

np，如果你觉得更易读的话，你也可以把#multipleNotY模板移到ng-container之外

【解决方案2】：

最简单的做法可能是将您的逻辑放入组件中的一个函数中，然后在 ngIfs 中引用它。

例如。

public showHideFunction() : number {
    if(field.ajax && field.ajax='Y' && field.ajax && field.multiple=='Y')
    {
        return 1;
    }
    else if (field.ajax && field.ajax='Y' && field.ajax && field.multiple=='N'))
    {
        return 2;
    }
    else
    {
        return 3;
    }
}

<div *ngIf="showHideFunction() === 1"></div>
<div *ngIf="showHideFunction() === 2"></div>
<div *ngIf="showHideFunction() === 3"></div>

有点乱，但它会工作。

【讨论】：

模板中的函数调用性能极低，通常是不好的做法