CODEWITHSUNDEEP
javascriptangulartypescriptangular-material
CHAHI Saad
CHAHI Saad

Reputation: 312

Display data json in dropdown using angular material

I have created an Angular project with angular material and I want to display a list of units inside a dropdown.

the data comes like expected like this :

enter image description here

this is my .ts code :

ListUnits:Array<Unit>=[]

units(){
return this.trq.getListUnit().subscribe(
  (data)=>{
    this.ListUnits.push(data.respModel);
    console.log(this.ListUnits);
  }
)

}

and here is my .HTML code :

<mat-label>Unite</mat-label>
            <mat-select formControlName= "unite_id" required>
                <mat-option *ngFor="let unit of ListUnits"[value]="unit.id">
                  {{unit.unitName}}
                </mat-option>
            </mat-select>

but unfortunately, nothing appears Which are the steps to follow to achieve that?

Upvotes: 1

Views: 940

Answers (2)

Prince
Prince

Reputation: 275

sample json array declaration

TimeArray = [{id:1,name:'test1'},{id:2,name:'test2'}];

Upvotes: -2

zainhassan
zainhassan

Reputation: 1780

You are pushing array inside array. Instead do this if you want to retain current data in ListUnits

this.ListUnits = [...this.ListUnits, ...data.respModel];

Otherwise simply assign array from response to ListUnits

this.ListUnits = data.respModel;

Upvotes: 2

Related Questions