Блог

Главная - Вопросы по программированию - как отобразить элементы массива, возвращенные функцией, на html-странице

как отобразить элементы массива, возвращенные функцией, на html-странице

#javascript #html #node.js #angularjs #typescript

Вопрос:

в коде, опубликованном ниже, используется метод MousePosition, который имеет атрибут coordianteFormat в качестве атрибута. функция createStringXY() возвращает строку, инкапсулирующую долготу и запятую, и они разделены запятыми. последняя функция продолжает выдавать значения long и lat по мере перемещения мыши. возвращенные значения из createStringXY() должны отображаться в html-теге

 <div id="mouse-position"></div>

чего я хочу добиться, так это отобразить значение долготы и широты отдельно в html.
согласно документации createStringXY возвращает массив:

 https://openlayers.org/en/latest/apidoc/module-ol_control_MousePosition-MousePosition.html
https://openlayers.org/en/latest/apidoc/module-ol_coordinate.html#~CoordinateFormat

пожалуйста, дайте мне знать, как это сделать

код:

 ngOnInit(){

var mousePositionControl = new MousePosition({
  className: 'custom-mouse-position',
  coordinateFormat: createStringXY(7),
  projection: 'EPSG:4326',
  // comment the following two lines to have the mouse position
  // be placed within the map.
  target: document.getElementById('mouse-position'),
  undefinedHTML: '',//for what to be rendered when the mouse leaves map scope: values https://openlayers.org/en/latest/apidoc/module-ol_control_MousePosition-MousePosition.html
});

}

HTML:

 <div class="MousePosition">
  <div id="mouse-position"></div>
</div>

Комментарии:

1. Вы можете использовать цикл *ngFor , он выглядит так, как вы используете angular, поэтому для углового вам нужно применить цикл *ngFor в html (если данные поступают в массив), в противном случае вы можете получить доступ к данным в html, например {{data.lat}}

2. @Wajid не могли бы вы привести пример

3. Можете ли вы отобразить массив, как [‘1’, ‘2’, ‘3’] в html? Если нет — для чего вся эта информация выше?

Метки: , ,