使用NgFor在angular2中生成子组件不起作用

Question

I'm using angular2 alpha 37.

I've defined a <map> component and a <marker> component (child of <map> ). The <map> component has a array data member which contains a list of marker coordinates. The <map> view should display all markers in the array

When defining the <map> view as follows (explicitly listing components for all array members):

@View({
  template:`
    <marker [model]="markers[0]"></marker>
    <marker [model]="markers[1]"></marker>
  `,
  directives:[Marker]
})

The <marker> components are updated whenever the corresponding array member changes. This is desired behaviour.

When defining the <map> view as follows (using NgFor ):

@View({
  template: '<marker *ng-for="#m of markers" [model]="m"></marker>',
  directives:[Marker,NgFor]
})

a new marker is created whenever the array members change, which is not desirable.

Needles to say I would like to use the NgFor method.

I've no clue what is going on. How can I use NgFor but avoid that new <marker> instances are created whenever the individual markers update?

Answer 1

Split the list ngFor iterates over from the model data.

This is Dart code but shouldn't be hard to translate to TS

import 'dart:math' show Random;
import 'package:angular2/angular2.dart';

@Component(
    selector: 'app-element',
    template: '''
<h3>app-element</h3>
<map></map>
    ''',
    directives: const [MapComponent])
class AppElement {}

@Component(selector: 'map',
    template: '''
<button (click)="changeValue()">Change value</button>
<marker *ngFor="let m of markersIndexes" [model]="markers[m]"></marker>
<!-- use `markers[m]` to assign a model but `markersIndexes` for `*ng-for` -->
''',
    directives: const [MarkerComponent, NgFor])
class MapComponent {
  MapComponent() {
    markers = <Marker>[
      new Marker('m0', 0),
      new Marker('m1', 1),
      new Marker('m2', 2),
      new Marker('m3', 3)
    ];
    markersIndexes = new List<int>.generate(markers.length, (int index) => index);
  }
  List<Marker> markers; // model to pass to <marker>
  List<int> markersIndexes; // indexes used by *ng-for
  // when markers are added or removed markersIndexes need to by updated of course

  // Update random marker item with random position value    
  Random _rnd = new Random();
  void changeValue() {
    int idx = _rnd.nextInt(3);
    markers[idx].position = _rnd.nextInt(100);
  }
}

@Component(
    selector: 'marker',
    template: '''
<h3>marker</h3>
<div>name: {{model.name}} pos: {{model.position}} created: {{createdAt}}</div>
''',
    styles: const [
      '''
:host {
  display: block;
  border: 1px solid green;
}
'''
    ])
class MarkerComponent implements OnInit {
  @Input() Marker model;
  String createdAt;

  MarkerComponent() {
    createdAt = new DateTime.now().toString();
  }
  void ngOnInit() {
    print(model);
  }
}

// Marker model
class Marker {
  String name;
  int position;

  Marker(this.name, this.position);

  @override
  String toString() => 'Marker: $name - $position';
}

Answer 2

try this

@View({
template:"<marker *ng-for="#m of markers" [model]="m">{{m}}</marker>",
 directives:[Marker,NgFor]
})

Answer 3

I saw that you use the alpha37 version which remains an alpha version and you can have some bugs... I made some tests using the beta0 version and it seems to work as expected. So I would recommend you to upgrade to this version... We expect beta versions to be more stable ;-)

Here is the code I used to made my test:

• Main component

   @Component({ selector: 'first-app', template: ` <map></map> `, directives: [ MapComponent ] }) export class AppComponent { } 

• Marker data object

   class Marker { name: string; position: int; constructor(name, position) { this.name = name; this.position = position; } } 

• Marker component

   @Component({ selector: 'marker', template:` <div class="marker">Marker {{model.name}} <button (click)="update()">Update</button></div> `, directives:[MarkerComponent] }) export class MarkerComponent implements OnInit { @Input() model: Marker; constructor() { } ngOnInit() { } update() { this.model.name = this.model.name + 'a'; } } 

• Map component

   @Component({ selector: 'map', template:` <marker *ngFor="#m of markers" [model]="m"></marker> <button (click)="update()">Update</button> `, directives:[MarkerComponent] }) export class MapComponent { constructor() { this.markers = [ new Marker('m0', 0), new Marker('m1', 1), new Marker('m2', 2), new Marker('m3', 3) ]; } update() { this.markers[1].name = 'm1a'; } } 

When I click on both update buttons, the name of the second marker is updated in the view and no additional <marker> element appears.

Edit

It could be the way you update the element in the list. Do you override it with a new instance or update the value of an attribute for an existant instance in the list? In the first case, I think that you could will a new element addition in the list.

update() {
  this.markers[1]= new Marker('m1a', 1);
}

After doing some tests, this approach works as well. No element added in the list.

Hope it helps you, Thierry