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

Problem

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

示范

我创建这个 Plunker 有一个简单的例子 http://plnkr.co/edit/XDfXknAHvybL3MSFLlPD?p=preview的问题。

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

<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. 正面第二个块（模板带有*ngIf:)
3. 点击“刷新”按钮；
4. 看看第二个块（模板与*ngIf：） 再次;

Question

造成此问题的原因是什么？如何解决？

内部模板带有 *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>;

笨蛋的例子 http://plnkr.co/edit/Wwv0HCvzfg9zadCHBPzQ?p=preview

附：但你为什么不使用ngTemplateOutlet or ngForTemplate解决方案？

例如：

• 如何将表达式作为 Angular2 中的输入传递给组件？ https://stackoverflow.com/questions/39974126/how-to-pass-an-expression-to-a-component-as-an-input-in-angular2/39977298#39977298

2)我在你的例子中注意到PrimeTemplate指示。所以这是第二个选择：

@ContentChild(PrimeTemplate) primeTmpl: PrimeTemplate;

和 HTML：

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

笨蛋的例子 http://plnkr.co/edit/TCIrSmjNy32gAtojTRmF?p=preview