Question

问题

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

示范

我创建了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>

发生问题的说明：

在Plunker中打开示例;
正面第二个块（带有*ngIf的模板:)）
点击＆＃34;刷新＆＃34;按钮;
再次查看第二个块（带有*ngIf :)的模板;

问题

导致此问题的原因以及如何解决？

Answer 1

使用* ngIf的内部模板中有几个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

P.S。但为什么你没有使用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

带有* ngIf内部的模板，在更改模型

1 个答案: