Help With Angular Service

ionarawilson — Thu, 26 Mar 2020 17:16:15 GMT

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:

<h5>Summary Tool (click one of the buttons below to start)</h5>

</option>

<option *ngFor="let attribute of attributesarray let i = index;" value={{i}}>{{attribute.name}}</option>

</select>

</div>

</div>

<br>

topic Help With Angular Service in ArcGIS JavaScript Maps SDK Questions

Help With Angular Service