Javascript 如何将数据从mapbox提取到html页面

我正在使用Mapbox gl js。我正在控制台中获取数据，但我无法将数据提取到HTML中，有人能帮我这样做吗。 我需要数据，在mapdata中显示在html页面上，当我单击标记时，showStory条件必须为true。我尝试使用ngFor使用mapData，但它不起作用，当我在mapbox外使用console时，console中的数据也不会出现

HTML:

地名
乡村、城市
邮政编码、地址

Ts:

publicshowstory:boolean=false；
这是我们的服务
.getAllPins（）
.订阅(
引脚=>{
this.places=pins.data；
this.points=this.places.map（函数（引脚）{
返回{“name”：pins.name，“lat”：pins.lat，“lang”：pins.lang，“address”：pins.address，“category_name”：pins.category_name，
“描述”：pin。描述，“电子邮件”：pin。电子邮件，“电话号码”：pin。电话号码，“pin。媒体”：pin。pin。媒体，
“国家”：pins.user\u details.country，“user\u name”：pins.user\u details.user\u name}；
});
mapboxgl.accessToken='pk.eyj1ijoicmfrc2hpdghmtkilchijoi2pjchl1yw5wmjr5czj6bzdqdjzrbdrzesj9.OOqu6zVyNsXavzCsYoBdPA'；
var坐标=此点；
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/mapbox/streets-v9',
中心：[坐标[1]。纬度，坐标[1]。朗]，
缩放：3
});
map.on（'load'，function（）{
对于（变量i=0；i{
this.id=e.features[0].layer.id；
map.setPaintProperty（e.features[0].layer.id，“圆半径”，20）；
var coordinates=e.features[0]。geometry.coordinates.slice（）；
var description=e.features[0].properties.name；
而（数学abs（e.lngLat.lng-坐标[0]）>180）{
坐标[0]+=e.lngLat.lng>坐标[0]？360:-360；
}
popup.setLngLat（坐标）
.setHTML（说明）
.addTo（地图）；
});
地图上（“鼠标移动”，“点”+i，e=>{
if（this.id）{
map.setPaintProperty（此.id‘圆半径’，15）；
this.id=未定义；
} 
popup.remove（）；
});
地图上（“点击”，“点”+i，e=>{
this.id=未定义；
this.mapData=e.features[0]。属性
对于（变量i=0；i{}）；

如果要将数据从组件显示到

HTML

，请使用

innerHTML

属性

在html中

<li><b [innerHTML]="place"></b></li> 
<li [innerHTML]="Country, City"></li> 
<li [innerHTML]="Postal Code, Address"></li> 

---

我不知道你想做什么。你能详细解释一下吗？出什么问题了？感谢您的回复，这里是console.log（this.mapData），我正在获取数据。。我需要从那里获取名称并将该名称添加到html中page@SteveBennettㄹ谢谢你的回复。。这有帮助

public showStory:boolean = false;
this.ApiService
              .getAllPins()
              .subscribe(
                pins => {
                  this.places = pins.data;
                  this.points = this.places.map(function(pins) {
                    return {"name":pins.name,"lat":pins.lat,"lang":pins.lang,"address":pins.address,"category_name":pins.category_name,
                    "description":pins.description,"email":pins.email,"phone_number":pins.phone_number,"pin_media":pins.pin_media,
                    "country":pins.user_details.country,"user_name":pins.user_details.user_name};
                });
                  mapboxgl.accessToken = 'pk.eyJ1IjoicmFrc2hpdGhhMTkiLCJhIjoiY2pjcHl1YW5wMjR5czJ6bzdqdjZrbDRzeSJ9.OOqu6zVyNsXavzCsYoBdPA';
                    var coOrdinates = this.points;
                    var map = new mapboxgl.Map({
                      container: 'maps',
                      style: 'mapbox://styles/mapbox/streets-v9',
                      center: [coOrdinates[1].lat,coOrdinates[1].lang],
                      zoom: 3
                    });
                    map.on('load', function () {
                      for(var i=0; i< coOrdinates.length; i++) {
                        map.addLayer({
                        "id": "points" + i,
                        "type": "circle",
                        "paint":{
                          "circle-radius":15,
                          "circle-color":'#' + (Math.random().toString(16) + "000000").substring(2,8)    
                        },
                        "source": {
                          "type": "geojson",
                          "data": {
                            "type": "FeatureCollection",
                            "features":  [{
                                "type": "Feature",
                                "properties": {"field":coOrdinates[i],"name":coOrdinates[i].name},
                                "geometry": {
                                  "type": "Point",
                                  "coordinates": [coOrdinates[i].lat,coOrdinates[i].lang]
                                }
                              }]
                          }
                        }
                      });
                      var popup = new mapboxgl.Popup({
                          closeButton: false,
                          closeOnClick: false
                      });
                      map.on("mouseenter", "points" + i, e => {
                        this.id = e.features[0].layer.id;
                        map.setPaintProperty(e.features[0].layer.id, 'circle-radius', 20);
                        var coordinates = e.features[0].geometry.coordinates.slice();
                        var description = e.features[0].properties.name;
                        while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
                          coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
                       }
                       popup.setLngLat(coordinates)
                            .setHTML(description)
                            .addTo(map);
                      });
                      map.on("mouseleave", "points" + i, e => {
                        if(this.id) {
                          map.setPaintProperty(this.id, 'circle-radius', 15);
                          this.id = undefined;
                        } 
                         popup.remove();
                      });
                      map.on("click", "points" + i, e => {
                        this.id = undefined;
                        this.mapData = e.features[0].properties
                        for(var i=0; i< coOrdinates.length; i++) {
                          map.setPaintProperty('points'+i, 'circle-radius', 15); 
                        }
                        map.setPaintProperty(e.features[0].layer.id, 'circle-radius', 20);
                        this.showStory = true; 
                       this.mapData = JSON.parse(this.mapData.field);
                       console.log(this.mapData);
                      });
                      }
                    });
          }, error => {});

<li><b [innerHTML]="place"></b></li> 
<li [innerHTML]="Country, City"></li> 
<li [innerHTML]="Postal Code, Address"></li> 

map.on("click", "points" + i, e => {
    this.id = undefined;
    this.mapData = e.features[0].properties
    for(var i=0; i< coOrdinates.length; i++) {
        map.setPaintProperty('points'+i, 'circle-radius', 15); 
    }
    map.setPaintProperty(e.features[0].layer.id, 'circle-radius', 20);
    this.showStory = true; 
    this.mapData = JSON.parse(this.mapData.field);
    this.place = this.mapData.place; 
    console.log(this.mapData);
});