angular 4 setting dropdown option values received from api

Question

html:

<div *ngIf="myBooks">
    <mat-select [(ngModel)]="selected">
      <mat-option *ngFor="let book of myBooks" name="state">{{book.state}}</mat-option>
    </mat-select>
 <p>{{ selected }}</p>
</div>

component:

import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
import {Component, Inject} from '@angular/core';
import {DataService} from '../../create/createservice';
import {FormControl, Validators} from '@angular/forms';
import {State} from '../../create/model';
import {City} from '../../create/model2';
import { HttpClient } from '@angular/common/http';
import { HttpErrorResponse } from '@angular/common/http/src/response';

@Component({
selector: 'app-add.dialog',
templateUrl: '../../dialogs/cityadd/add.dialog.html',
styleUrls: ['../../dialogs/cityadd/add.dialog.css']
})

export class AddDialogComponent1 {

constructor(public dialogRef: MatDialogRef<AddDialogComponent1>,
          @Inject(MAT_DIALOG_DATA) public data1: City,
          public dataService: DataService,private httpService:HttpClient) { 
  }

myBooks: string [];
selected = null;

formControl = new FormControl('', [
Validators.required
// Validators.email,
]);

states: string[];
city:string[];


 ngOnInit () {
  this.httpService.get('api/state-city').subscribe(
    data => {
      this.myBooks = data as string [];     // FILL THE ARRAY WITH DATA.
    },
    (err: HttpErrorResponse) => {
      console.log (err.message);
    }
  );
 }

This is my code i want to select values which is there is in this api but i am not getting any values please help me how to bind it

in my api i have 'state' name i want that values in the dropdown list how to get it

nothing i am not getting any error but i am not getting that mat-select field only — chethu
– chethu, Commented May 8, 2018 at 5:27

Biju Maharjan · Accepted Answer · 2018-05-08 05:45:20Z

2

Declare array of myBooks as:

myBook : any[]=[]

and pass value of data on that :

this.myBook = data

It will work!

edited May 8, 2018 at 5:45

answered May 8, 2018 at 5:39

Biju Maharjan

4473 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Biju Maharjan Over a year ago

can you show/say me what data has return?? also check and compare if you have material "mat-select" is wrong on this link Plunker Demo

Lakshmi Prasanna · Accepted Answer · 2018-05-08 05:28:23Z

0

you are using selected as a ngModel. You should assing the value whihc need to be selected.

here in your code you are assigning a null.

answered May 8, 2018 at 5:28

Lakshmi Prasanna

4564 silver badges17 bronze badges

Comments

bereket gebredingle · Accepted Answer · 2018-05-08 05:54:36Z

0

The problem is you declare myBooks: string []; as array of strings. And later in your *ngFor loop you tried to access them as an array of object book.state

So declare myBooks: any [] = []; later make sure the api is responding the data u r expecting.

I hope this helps,

edited May 8, 2018 at 5:54

answered May 8, 2018 at 5:31

bereket gebredingle

13.1k3 gold badges41 silver badges49 bronze badges

1 Comment

bereket gebredingle Over a year ago

show me your api response . Also what is the error ?

Collectives™ on Stack Overflow

angular 4 setting dropdown option values received from api

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related