如何使用angular2在* ngFor內部使用循環數組中mapbox的內容

Question

我已經編寫了函數來針對打字稿中給出的坐標給出標記，但是我想將它們放入數組並循環。 以便它可以與* ngFor一起用於html中，任何人都可以幫助我解決此問題。

TS：

mapboxgl.accessToken = 'pk.eyJ1IjoicmFrc2hpdGhhMTkiLCJhIjoiY2pjcHl1YW5wMjR5czJ6bzdqdjZrbDRzeSJ9.OOqu6zVyNsXavzCsYoBdPA';
    var map = new mapboxgl.Map({
      container: 'maps',
      style: 'mapbox://styles/mapbox/streets-v9',
      center: [12.568337,55.676098],
      zoom: 9
});

  map.on('load', function () {
    map.addLayer({
      "id": "points",
      "type": "circle",
      "paint":{
        "circle-radius":10,
        "circle-color":'rgba(55,148,179,1)'    
      },
      "source": {
        "type": "geojson",
        "data": {
          "type": "FeatureCollection",
          "features": [
            {
              "type": "Feature",
              "properties": {},
              "geometry": {
                "type": "Point",
                "coordinates": [12.568337,55.676098]
              }
            },
            {
              "type": "Feature",
              "properties": {},
              "geometry": {
                "type": "Point",
                "coordinates": [13.077576,55.670667]
              }
            },
            {
              "type": "Feature",
              "properties": {},
              "geometry": {
                "type": "Point",
                "coordinates": [12.35112,55.816349]
              }
            }
          ]
        }
      },
    });
});

HTML：

<div id='maps' style="height:440px"></div>

Answer 1

您需要如下的嵌套ngFor

<ng-container *ngFor="let cordinates of source.data.features" > 
 <div *ngFor="let cordiante of cordinates.geometry.coordinates" [latitude]="m[0]" [longitude]="m[1]" ></div>
</ng-container>

並分配

this.source = yourArray; 

Answer 2

You will get array now. Loop tht now in html using *ngFor

  map.addLayer = [{
  "id": "points",
  "type": "circle",
  "paint":{
    "circle-radius":10,
    "circle-color":'rgba(55,148,179,1)'    
  },
  "source": {
    "type": "geojson",
    "data": {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "properties": {},
          "geometry": {
            "type": "Point",
            "coordinates": [12.568337,55.676098]
          }
        },
        {
          "type": "Feature",
          "properties": {},
          "geometry": {
            "type": "Point",
            "coordinates": [13.077576,55.670667]
          }
        },
        {
          "type": "Feature",
          "properties": {},
          "geometry": {
            "type": "Point",
            "coordinates": [12.35112,55.816349]
          }
        }
      ]
    }
  },
}];