使用 *ngIf 和 ng-content 时，循环 ng-template 显示错误的模板

Question

我有一个简单的数据列表组件，作为输入，可以传递要显示的数据，为列表设置 header 以及为列表项设置自定义模板。

所有这些工作正常，但是当我出于某种原因在 header 中使用 *ngIf 时，列表项的模板与我传递的模板不同。我认为这可能是 @ContentChild 的问题，但我不确定是什么问题。

数据列表组件

@Component({
    selector: 'data-list',
    template: `
        <ng-content select="[data-list-header]"></ng-content>
        <div>
            <ng-template *ngFor="let item of itemsData" let-item [ngForOf]="[item]" [ngForTemplate]="itemTemplate">
            </ng-template>
        </div>
    `
})

export class DataListComponent {
    @Input() itemsData: any[];
    @ContentChild(TemplateRef) itemTemplate: TemplateRef<ElementRef>;
}

模板

<data-list [itemsData]="items">
    <div data-list-header style="border-bottom: 2px solid grey;">
        <h1>Persons List</h1>
        <h2>Count: {{ items.length }}</h2>
    </div>
    <ng-template let-item>
        <div>
            <h4>{{ item.name }} {{ item.surname }}</h4>
        </div>
    </ng-template>
</data-list>

结果在

以上模板工作正常，显示了人员列表。但是，一旦我添加 *ngIf 来隐藏计数作为示例，就会显示计数列表。

模板无法正常工作

<data-list [itemsData]="items">
    <div data-list-header style="border-bottom: 2px solid grey;">
        <h1>Persons List</h1>
        <h2 *ngIf="showCount">Count: {{ items.length }}</h2>
    </div>
    <ng-template let-item>
        <div>
            <h4>{{ item.name }} {{ item.surname }}</h4>
        </div>
    </ng-template>
</data-list>

结果在

这是上面的堆栈闪电战：https://stackblitz.com/edit/ng-template-loop-issue

Answer 1

出现此问题是因为在使用结构指令（例如 *ngIf）时总是会创建 ng-template。

现在 @ContentChild(TemplateRef) 意味着查找第一个模板 (ng-template) 的查询已完成。因此，在这种情况下，header 上的 *ngIf 意味着会自动创建一个 ng-template，然后由查询获取。

为解决此问题，使用了模板引用，以便 @ContentChild() 查询完成对模板引用的搜索。示例：@ContentChild('itemTemplate').

更新代码：https://stackblitz.com/edit/ng-template-loop-issue

更多信息：

使用 *ngIf 和 ng-content 时，循环 ng-template 显示错误的模板

Looping ng-template is showing wrong template when using *ngIf and ng-content

templates

angular-template

angular-ng-if

angular