Help With Angular Service

[ionarawilson]

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>