带有 *ngIf else 模板的 ng-container 不适用于 ContentChildren QueryList

Question

我正在尝试通过 @ContentChildren 和 QueryList 使用符号 ng-container *ngIf="condition; else tplRef" 动态更改组件的内容，当 condition 为真时 ng-container 内容可见通过 QueryList 但当 condition 为 false 时，ng-template 内容不可见。

我的目标是根据 `Query

可见的条件显示不同的元素

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

Answer 1

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

以内

这样试试：

Working Demo

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

Answer 2

您已将 <ng-template #ref> 与 <app-container> 分开，您必须将 <ng-template #ref> 保留在 <app-contianer> 内。这就是解决方案！

带有 *ngIf else 模板的 ng-container 不适用于 ContentChildren QueryList

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

angular

ng-container