簡體   English   中英

帶有* ngIf else模板的ng-container不適用於ContentChildren QueryList

[英]ng-container with *ngIf else template don't work with ContentChildren QueryList

我試圖通過@ContentChildrenQueryList動態更改組件的內容QueryList ng-container *ngIf="condition; else tplRef" ,當condition為true時ng-container內容由QueryList可見,但是當condition為false時, ng-template內容不可見。

我的目標是根據條件顯示不同的元素,這些條件可以通過“查詢”看到

https://stackblitz.com/edit/angular-g2v6nd

您需要將<ng-template #ref>... </ng-template>保留在<app-container>

嘗試這樣:

工作演示

<app-container>
    <app-container-item name="Item 1"></app-container-item>
    <app-container-item name="Item 2"></app-container-item>

    <!-- work fine if true -->
    <ng-container *ngIf="true; else ref">
        <app-container-item name="Item when true"></app-container-item>
    </ng-container>
    <!-- should display content from ref, but don't work :( -->
    <ng-container *ngIf="false; else ref">
        <app-container-item name="Item when true"></app-container-item>
    </ng-container>

    <ng-template #ref>
        <app-container-item name="Item when false"></app-container-item>
    </ng-template>

</app-container>

您已經分居了<ng-template #ref><app-container> ,你必須保持<ng-template #ref>里面的<app-contianer> 那就是解決方案!

暫無
暫無

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

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