带有ngm-circle的ngfor引发错误:Angular2 [英] ngfor with agm-circle throws error : Angular2

问题描述

我正在使用 agm (谷歌角度地图)，并想使用ngfor绘制 n 个圆，但出现错误:

I am using agm (angular google maps) and want to draw n number of circles using ngfor but i am getting an error :

Can't bind to 'ngFor' since it isn't a known property of 'agm-circle'.

这是我的html:

<agm-circle *ngFor="data in circles"
              [latitude]="data.lat"
              [longitude]="data.lng"
              [circleDraggable]="true"
              [editable]="true"
              [fillColor]="'data.color'"
              [radius]="data.radius"
  >
  </agm-circle>

这是我的具有数据的 ts 文件:

this is my ts file having data:

lat: number;
  lng: number;
  circle: any;
  @ViewChild(AgmPolygon) polygon: any;

  path = [
    { lat: 51.791629704426924, lng: 7.809007 },
    { lat: 51.974729774949644, lng: 0.6317138671875 },
    { lat: 51.303145259199056, lng: 0.6646728515625 },
    { lat: 51.416338106400396, lng: -0.4779052734375 }
  ];
  constructor () {
    this.lat = 51.678418;
    this.lng = 7.809007;
    this.circle = [
      {lat: 51.79, lng: 7.8, radius: 60000, color: 'red'},
      {lat: 52.79, lng: 12.8, radius: 60000, color: 'green'},
      {lat: 54.79, lng: 10.8, radius: 60000, color: 'yellow'},
      {lat: 51.79, lng: 8.8, radius: 60000, color: 'yellow'},
      {lat: 60.79, lng: 7.8, radius: 60000, color: 'green'},
    ];

  }

至于这些都是假人数据，但圈子的数据将为 n ，任何建议将受到赞赏

as for as these are dummies data but this data of circles will be n any suggestion will be appreciated

推荐答案

我已经通过使用关键字调整ngFor来解决了这个问题，所以我不知道为什么AGM不支持上述语法，而是我的新语法:

i have resolved the issue by tweaking ngFor with the key-word let I dont know why AGM is not supporting the above syntax however my new:

Index.html

<agm-circle *ngFor="let data of circle"
              [latitude]="data.lat"
              [longitude]="data.lng"
              [circleDraggable]="true"
              [editable]="true"
              [fillColor]="data.color"
              [radius]="data.radius"
  >
  </agm-circle>

希望这会有所帮助:-p

Hope it will be helpful :-p

这篇关于带有ngm-circle的ngfor引发错误:Angular2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！