*ngIf 中的嵌套条件使用 ng-container

Question

我正在处理需要根据某些条件显示行列表的要求。有一个 table 单元格 (td)，其值应根据某些条件填充。我希望使用 *ngIf

在 angular 中实现以下目标

if(value1||values2)
{
    if(value3!=null && value4==null)
    {
        //display value 3
    }
    else
    {
     //display value 4
    }
}
else
{
//display default value
}

我想要实现的目标的图示我使用 *ngIf 进行了尝试，但出现错误 **Bidings cannot contain assignments **

<ng-container *ngIf="(value1 || value2); else showDefault">
    <ng-container *ngIf="value3!=null && value4==null; else showValue4">
    </ng-container>
    <ng-template #showValue4>
    </ng-template>
</ng-container>
<ng-template #showDefault>
</ng-template>

还有其他方法可以实现吗？

Answer 1

虽然你的解决方案看起来不错。另一种方法是使用 ngTemplateOutlet 指令。

这样您就可以准备好您的 ngTemplates，并通过模板名称决定您要使用的内容，如下所示：

<ng-container *ngTemplateOutlet="selected">
  This text is not displayed
</ng-container>

<ng-template #template1>
  <p>This is our template.</p>
</ng-template>

<ng-template #template2>
  <p>This is another template.</p>
</ng-template>

<ng-template #template3>
  <p>This is one more template.</p>
</ng-template>

<button (click)="selected = template1" >1</button>
<button (click)="selected = template2" >2</button>
<button (click)="selected = template3" >3</button>

Here你可以阅读更多。

Here 我创建了一个 StackBlitz 来玩。

Answer 2

尝试

<ng-container *ngIf="value3 && !value4; else showValue4">

*ngIf 中的嵌套条件使用 ng-container

Nested Condition in *ngIf using ng-container

if-statement

angular-ng-if

angular