簡體   English   中英

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

[英]Nested Condition in *ngIf using ng-container

我正在處理需要根據某些條件顯示行列表的要求。 有一個表格單元格( td ),其值應根據某些條件進行填充。 我希望使用 * ngIf以角度實現以下目標

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>

有沒有其他方法可以實現這一目標?

雖然您的解決方案看起來不錯。 另一種方法是使用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>

在這里你可以閱讀更多。

在這里我創建了一個 StackBlitz 來玩。

嘗試

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM