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

Question

我需要的

        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

Answer 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>