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

Question

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

我的目标是根据条件显示不同的元素，这些元素将通过"查询"可见

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

Answer 1

您需要将<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>