Template with * ngIf internal, does not work after changing the model

Question

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 incorrect in the view (he presented a list with the right size, but only with data of only the first element).

Demonstration

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

This type of use causes a 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:

• Open an example in Plunker;
• Obverse of the second block (Template with *ngIf:)
• Click the "Refresh" button;
• And look at the second block (Template with *ngIf:) again;

Question

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

Answer 1

* ng TemplateRef. , .

1) , , ng- , :

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