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

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

所有这些工作正常，但是当我*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