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

发布时间：2020-12-17 06:55:39 所属栏目：安全来源：网络整理

导读：我正在使用angular2 alpha 37. 我已经定义了 map组件和 marker component( map的子项). map component有一个数组数据成员,它包含一个标记坐标列表. map视图应显示数组中的所有标记定义 map时查看如下(显式列出所有数组成员的组件)： @View({ template:` mar

我正在使用angular2 alpha 37.

我已经定义了< map>组件和< marker> component(< map>的子项).
< map> component有一个数组数据成员,它包含一个标记坐标列表. < map>视图应显示数组中的所有标记

定义< map>时查看如下(显式列出所有数组成员的组件)：

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

<标记>每当相应的数组成员更改时,组件都会更新.这是期望的行为.

定义< map>时查看如下(使用NgFor)：

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

每当阵列成员改变时,都会创建一个新标记,这是不可取的.

Needles说我想使用NgFor方法.

我不知道发生了什么事.我如何使用NgFor但避免使用新的< marker>只要个别标记更新,就会创建实例？

解决方法

拆分列表ngFor从模型数据迭代.

这是Dart代码,但不应该很难转换为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';
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!