Question

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

所有这一切都很好，但是当我在标题中使用*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来隐藏Count作为示例，就会显示计数列表。

模板无法正常工作

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

结果

这是上面的一个stackblitz：https://stackblitz.com/edit/ng-template-loop-issue

Answer 1

之所以会发生此问题，是因为在使用结构性指令（例如*ngIf）时始终会创建ng-template。

现在具有@ContentChild(TemplateRef)意味着查询已找到第一个模板（ng-template）。因此，在这种情况下，标头上有*ngIf意味着将自动创建一个ng-template，然后由查询将其提取。

为解决此问题，使用了模板参考，以便完成@ContentChild()查询以搜索模板参考。例如：@ContentChild('itemTemplate')。

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

更多信息：

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

1 个答案: