angular - 内部带有 *ngIf 的模板，更改模型后不起作用

Question

问题

Angular 2.2版本之后。 *，我注意到我的应用程序的某些组件存在问题，更新数据后， View 中的数据是错误的(它以正确的大小显示列表，但仅包含第一项的数据)。

示范

我创建了 this Plunker with a simple example的问题。

这种类型的使用会导致问题:

<list-component [data]="list">
  <template pTemplate let-item>
      <b *ngIf="item % 2 == 0">{{item}}</b>
      <del *ngIf="item % 2 != 0">{{item}}</del>
  </template>
</list-component>

出现问题说明:

1. 在 Plunker 中打开示例；
2. 观察第二 block (带有*ngIf的模板:)
3. 点击“刷新”按钮；
4. 并再次查看第二个 block (Template with *ngIf:);

问题

什么可能导致此问题以及如何解决？

Answer 1

使用 *ng 的内部模板如果您有多个 TemplateRef。当数据改变时，它是混合的。

1) 因此，您必须在 ng-content 中指定您正用于您的目的的模板，例如:

<list-component [data]="list">
  <template #tmpl let-item>  <== notice #tmpl
    <b *ngIf="item % 2 == 0">{{item}}</b>
    <del *ngIf="item % 2 != 0">{{item}}</del>
  </template>
</list-component>

然后在您的 ListComponent 中:

@ContentChild('tmpl') template: TemplateRef<any>;

Plunker Example

附言但您为什么不使用 ngTemplateOutlet 或 ngForTemplate 解决方案？

例如:

• How to pass an expression to a component as an input in Angular2?

2) 我在您的示例 PrimeTemplate 指令中注意到。所以这里是第二个选项:

@ContentChild(PrimeTemplate) primeTmpl: PrimeTemplate;

和 html:

<template-loader [data]="item" [template]="primeTmpl.template"></template-loader>

Plunker Example