Angular多个ngif else在模板中传递参数

Question

是否可以在 angular.html 中执行两个 ngIf ？

一个例子：

if(1=2){
}else{
    if(){
    }
}

我需要做两项检查。

检查老师的限制是否错误，检查教室的可用性。

下面是我的代码示例。我是角度新手，我不知道一切是如何工作的。

   <td *ngIf="!restricaoSegUm; else templateName" *ngIf="!restricaoSalaSegUm; else sala" [dragula]='"another-bag"' [dragulaModel]='segUm'>
      <div [@resultadoAnimacao]="animationsState" class="cursor-pointer"  *ngFor='let s1 of segUm' (dblclick)="removeNumbers(s1,this.segUm)">{{s1?.no_diciplinas}}</div>
    </td>

<ng-template #templateName >
    <td style="background-color: rgb(244, 67, 54);"></td>
</ng-template>
<ng-template-sala #sala>
    <td style="background-color: rgb(244, 146, 54);"></td>
</ng-template-sala>

Answer 1

*ngIf而不是完成你正在做的事情的结构指令。您可以尝试使用ngTemplateOutlet和ngTemplateOutletContext来帮助构建标记，使其更具可读性。

<ng-container [ngTemplateOutlet]="(statement) ? if : else"
              [ngTemplateOutletContext]="{ data: { key: value, values: [...], ... } }"></ng-container>

<ng-template #if>
  <div>...</div>
</ng-template>

<ng-template #else 
             let-data="data" 
             let-values="values" 
             let-...="'...'">

  <ng-container [ngTemplateOutlet]="(statement) ? innerIf : innerElse"></ng-container>

  <ng-template #innerIf>
    <td [ngClass]="'text-danger': data.key === 'something'">{{ data.key }}</td>
  </ng-template>

  <ng-template #innerElse>
    <td *ngFor="let value in values">{{ value }}</td>
  </ng-template>

</ng-template>

无论您在模板中选择哪种方法（*ngIf、*ngTemplateOutlet、 ...）来处理这种复杂性，似乎最好的解决方案都是创建更多无状态组件。