CODEWITHSUNDEEP
javascriptarraysangularngfor
mdailey77
mdailey77

Reputation: 2409

iterating over an array of class objects using ngFor not displaying in angular 5

I am trying to iterate over an array of class objects for a dropdown menu in Angular 5. Nothing is displaying in the dropdown menu and there are no errors in the browser console.

The object array is derived from this model:

    export class NewEnglandState {
    constructor (
        name: string,
        abbrv: string,
        lat: number,
        lng: number,
        zoom: number,
    ) {}
}

In the component I built the array:

    export class InterfaceComponent implements OnInit {
      newenglandstates = [
        new NewEnglandState('Massachusetts', 'MA', 42.02889443064134, -71.65008582421876, 8 ),
        new NewEnglandState( 'Connecticut', 'CT', 41.527086145800006, -72.65808142968751, 9 ),
        new NewEnglandState( 'Maine', 'ME', 44.95702443907399, -68.95843543359376, 7 ),
        new NewEnglandState( 'New Hampshire', 'NH', 43.95328236137632, -71.28753699609376, 8 ),
        new NewEnglandState('Rhode Island', 'RI', 41.64828864411775, -71.30401648828126, 9 ),
        new NewEnglandState('Vermont', 'VT', 43.901850824945996, -72.50152625390626, 8 ),
        new NewEnglandState('All New England', 'ANE', 43.8992496, -71.6135105, 7 )
      ];
}

This is what I have in the component's HTML:

<select class="form-control" title="Filter by state."  (change)="onSelect($event.target.value)">
            <option *ngFor="let state of newenglandstates" value="state.abbrv">
                {{ state.name }}
            </option>           
        </select>

No text is displaying in the dropdown menu. Is there something I need to add to the ngFor function?

Upvotes: 0

Views: 1091

Answers (1)

cyberpirate92
cyberpirate92

Reputation: 3186

You have 2 problems with your code

Problem 1:

<option *ngFor="let state of newenglandstates" value="state.abbrv">
    {{ state.name }}
</option>

should be 

<option *ngFor="let state of newenglandstates" value="{{state.abbrv}}">
   {{ state.name }}
</option>

value is used as a HTML attribute and expects a string value, so when value="state.abbrv", all the options end up having the string state.abbrv (not the value of state.abbrv), hence you need to use the data binding syntax to provide the value instead.

Problem 2:

Your class constructor should be

export class NewEnglandState {
    constructor (
        public name: string,
        public abbrv: string,
        public lat: number,
        public lng: number,
        public zoom: number,
    ) {}
}

which is equivalent to

export class NewEnglandState {

  public name: string;
  public abbrv: string;
  public lat: number;
  public lng: number;
  public zoom: number;

  constructor(
    name: string,
    abbrv: string,
    lat: number,
    lng: number,
    zoom: number,
  ) {
    this.name = name;
    this.abbrv = abbrv;
    this.lat = lat;
    this.lng = lng;
    this.zoom = zoom;
  }
}

missing the public keyword (or any access specifier in general) in the constructor parameter makes the parameters plain function arguments.

working stackblitz

Upvotes: 1

Related Questions