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

问题描述

问题

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

演示

我创建了此问题，并提供了一个简单的问题示例.

这种使用方式会引起问题:

<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的模板:)；

问题

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

解决方案

带有* 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>;

柱塞示例

P.S.但是为什么不使用ngTemplateOutlet或ngForTemplate解决方案?

例如:

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

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

@ContentChild(PrimeTemplate) primeTmpl: PrimeTemplate;

和html:

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

柱塞示例

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

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