AnsweredAssumed Answered

Help with Angular Service

Question asked by ionara_wilson on Mar 26, 2020

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 })  mapViewElElementRef;

 

//  @ViewChild('economicimpactfactorsselect', { static: false }) economicimpactsselect: ElementRef;
  attributesarray;
  constructor(private esriMapServiceEsriMapService) { }

  public ngOnInit() {

 

    this.esriMapService.loadMap(this.mapViewEl).then(attrarray => this.attributesarray = attrarray)
 
  } // ngOnInit

}

 

 

The Service:

import {ElementRefInjectableViewChildfrom '@angular/core';
import { loadModules } from 'esri-loader';
import esri = __esri;

@Injectable()
export class EsriMapService {

     mapView;
  constructor() { }

  loadMap(mapContainerElementRef) {
 
    const promise = new Promise((resolvereject=> {
      loadModules([
        'esri/Map',
        'esri/views/MapView',
        "esri/layers/FeatureLayer"
      ])
        .then(([EsriMapEsriMapViewFeatureLayer]) => {

          let mapesri.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 mapViewesri.MapView = new EsriMapView({
            container: mapContainer.nativeElement,
            center: [-99.531.2],
            zoom: 6.5,
            map: map
          });
  map.add(economicimpactLayer);
          mapView.when(() => {
            return economicimpactLayer.when(function() {

                let values = [];
                
                               for (let i = 0i < economicimpactLayer.fields.lengthi++) {
                                  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 = 0i < response.lengthi++)
               {
           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>

Outcomes