I am a beginner with the angular framework. I need to populate a drop in my component. The elements will come from a feature layer. The drop down needs be populated in the beginning to work or I guess I could subscribe to a method. I created a service that should return a promise so and on the element I believe I am subscribing to the method. However I am having issues with returning a promise in the service. Can you guys tell me how I should change the service to return the promise I need or if there is a better way to do it? I am using Angular 9, and the esri loader I think it is the latest because I used the command
npm install --save esri-loader
to install it, although my package.json lists the 2.13.0 version. Thank you for any help!
The Component:
@Component({
selector: 'app-esri-map',
templateUrl: './esri-map.component.html',
styleUrls: ['./esri-map.component.css']
})
export class EsriMapComponent implements OnInit {
// this is needed to be able to create the MapView at the DOM element in this component
@ViewChild('mapViewNode', { static: true }) mapViewEl: ElementRef;
// @ViewChild('economicimpactfactorsselect', { static: false }) economicimpactsselect: ElementRef;
attributesarray;
constructor(private esriMapService: EsriMapService) { }
public ngOnInit() {
this.esriMapService.loadMap(this.mapViewEl).then(attrarray => this.attributesarray = attrarray)
} // ngOnInit
}
The Service:
import {ElementRef, Injectable, ViewChild} from '@angular/core';
import { loadModules } from 'esri-loader';
import esri = __esri;
@Injectable()
export class EsriMapService {
mapView;
constructor() { }
loadMap(mapContainer: ElementRef) {
const promise = new Promise((resolve, reject) => {
loadModules([
'esri/Map',
'esri/views/MapView',
"esri/layers/FeatureLayer"
])
.then(([EsriMap, EsriMapView, FeatureLayer]) => {
let map: esri.Map = new EsriMap({
basemap: 'hybrid'
});
const economicimpactLayer = new FeatureLayer({
url: '//tfsgis.tamu.edu/arcgis/rest/services/EconomicImpactNew/TFEI_new_notsde/MapServer/0',
outFields: ["*"],
id: "economicimpactLayer"
});
let mapView: esri.MapView = new EsriMapView({
container: mapContainer.nativeElement,
center: [-99.5, 31.2],
zoom: 6.5,
map: map
});
map.add(economicimpactLayer);
mapView.when(() => {
return economicimpactLayer.when(function() {
let values = [];
for (let i = 0; i < economicimpactLayer.fields.length; i++) {
console.log(economicimpactLayer.fields[i].alias);
values.push(economicimpactLayer.fields[i].alias)
}
return values
}).then(getValues)
resolve('true');
}, err => {
console.error(err);
reject(err);
});
function getValues(response) {
let array = [];
for (let i = 0; i < response.length; i++)
{
array.push({name: response[i]});
}
this.attributesarray = array.slice();
console.log(this.attributesarray)
}
})
.catch(err => {
console.error(err);
reject(err);
});
});
return promise;
}
}
And the html:
<div class="container">
<div class="row">
<div class="column-12">
<h5>Summary Tool (click one of the buttons below to start)</h5>
<select name="economicimpactfactorsselect" id="economicimpactfactorsselect" >
<option value="" selected>
</option>
<option *ngFor="let attribute of attributesarray let i = index;" value={{i}}>{{attribute.name}}</option>
</select>
</div>
<div class="column-12">
</div>
</div>
</div>
<br>
<div #mapViewNode></div>
