带有 *ngIf 内部的模板，更改模型后不起作用 [英] Template with *ngIf inner, not work after change model

问题描述

问题

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

演示

我创建了这个Plunker 带有一个简单的问题示例.

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

<模板pTemplate let-item><b *ngIf="item % 2 == 0">{{item}}</b><del *ngIf="item % 2 != 0">{{item}}</del></list-component>

出现问题的说明:

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

问题

导致此问题的原因是什么以及如何解决?

解决方案

Inside template with *ng 如果你有多个 TemplateRef.当数据改变时，它是混合的.

1) 因此，您必须指定 ng-content 中的哪个模板完全用于您的目的，例如:

<模板#tmpl let-item><== 注意#tmpl<b *ngIf="item % 2 == 0">{{item}}</b><del *ngIf="item % 2 != 0">{{item}}</del></list-component>

然后在您的 ListComponent 中:

@ContentChild('tmpl') 模板:TemplateRef;

Plunker 示例

附言但是你为什么不使用 ngTemplateOutlet 或 ngForTemplate 解决方案?

例如:

• 如何将表达式作为 Angular2 中的输入传递给组件?

2) 而且我在您的示例中注意到 PrimeTemplate 指令.所以这是第二个选择:

@ContentChild(PrimeTemplate) primeTmpl: PrimeTemplate;

和 html:

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

Plunker 示例

Problem

After the version of Angular 2.2. *, I noticed a problem in some components of my application, that after updating the data, the data was wrong in the view (it presented the list with the right size, but only with the data only of the first item) .

Demonstration

I created this Plunker with a simple example of the problem.

This type of use causes the problem:

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

Instructions for the problem to occur:

1. Open the example in Plunker;
2. Obverse the second block (Template with *ngIf:)
3. Click the "Refresh" button;
4. And look at the second block (Template with *ngIf:) again;

Question

What can be causing this problem and how to solve it?

解决方案

Inside template with *ngIf you have several TemplateRef. When data is changed it is mixed.

1) So you have to specify which template within ng-content you are exactly using for your purpose, for example:

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

and then in your ListComponent:

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

Plunker Example

P.S. but why aren't you using ngTemplateOutlet or ngForTemplate solutions?

For Example:

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

2) And i noticed in your example PrimeTemplate directive. So here is second option:

@ContentChild(PrimeTemplate) primeTmpl: PrimeTemplate;

and html:

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

Plunker Example

这篇关于带有 *ngIf 内部的模板，更改模型后不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！