Angular multiple 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

你可以将2 * ngIf包装在一起。

所以喜欢

<div ng-if="myVar">
<div ng-if="myOtherVar">
<!--
Your code
-->
</div>
</div>

Answer 2

你可以将conditions放在一个*ngFor中，然后在单个元素上使用2个*ngFor是不正确的：

<td *ngIf="!restricaoSegUm && !restricaoSalaSegUm; else templateName" [dragula]='"another-bag"' [dragulaModel]='segUm'>

Answer 3

• 你不应该放2 * ngIfs，而是改为*ngIf="conditions; then thenBlock; else elseBlock"。
• 在conditions部分中，检查教师限制，一旦在templateName块中，您就可以确定要使用的背景颜色。

试试这个：

<td *ngIf="!restricaoSegUm; else templateName" 
    [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 [ngStyle]="restricaoSalaSegUm ? { 'background-color': 'rgb(244, 67, 54)' } : { 'background-color': 'rgb(244, 146, 54);' }">
        <div [@resultadoAnimacao]="animationsState" class="cursor-pointer"  *ngFor='let s1 of segUm' (dblclick)="removeNumbers(s1,this.segUm)">{{s1?.no_diciplinas}}</div>
    </td>
</ng-template>

我不明白你的逻辑条件是什么评价，希望我指出你正确的方向。

Answer 4

而不是结构指令*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，...），似乎最好的解决方案是创建更多的无状态组件。