Блог

У меня возникли проблемы с заполнением выпадающего списка из объекта ответа JSON, поступающего из API..

1. component.ts код

    for (let k in keys) {
           this.form.controls['id'].setValue(data[k].name);
           console.log(data[k].name);
       }
   });       
     

2. component.html код

    <mat-form-field>
       <mat-label>Select a User</mat-label>
       <mat-select formControlName="id">
           <mat-option *ngFor="let opt of options" [value]="opt.data" >
               {{ opt.data.name}}
           </mat-option>
       </mat-select>
   </mat-form-field>
     

3. console.log(данные)

    0: {id: 1, name: "User1"}
   1: {id: 2, name: "User2"}
   2: {id: 3, name: "User3"}
   3: {id: 4, name: "User4"}
   ...
     

4. console.log(data [k].name); // Это данные, которые мне нужны в раскрывающемся списке

      User1
     User2
     User3
     User4
     ...
     

Консоль.данные журнала показывают индекс для каждого объекта. Мой объект JSON довольно прост.
Это выглядит как:

 [
 {
    "id": 1,
    "name": "User1"
 },
 {
    "id": 2,
    "name": "User2"
 },...
]
  

Пожалуйста, дайте мне знать, что я делаю не так. Спасибо.

 Редактировать
Вот рабочий пример Stackblitz

Если я правильно понимаю вопрос, ваш ответ API представляет собой список, поэтому просто привяжите его с помощью цикла for к Mat-Option .

HTML-код:

 <mat-card>
    <form [formGroup]="form" (submit)="add()">
        <mat-form-field>
            <mat-label>Select a User</mat-label>
            <mat-select formControlName="id">
                                               //
                <mat-option *ngFor="let key of users" [value]="key">
                    {{ key.name }}
                </mat-option>
            </mat-select>
        </mat-form-field>
        <br/>
            <div fxLayout>
                <div>
                    <button
                    mat-raised-button
                    color="accent" [disabled] = "form.invalid">Save
                </button>
            </div>
        </div>
    </form>
</mat-card>
  

TS-код:

 getUsers(): void {
  this.usersService.getUsers().subscribe(users => {
        this.users = users;
        console.log(this.users)
  });
}
  

Forked_Stackblitz

Попробуйте это:

 <mat-form-field>
    <mat-label>Select a User</mat-label>
    <mat-select formControlName="id">
            <mat-option *ngFor="let item of list" [value]="item" >
                {{ item.name }}
            </mat-option>
        </mat-select>
</mat-form-field>
  

Измените свой TS-файл в соответствии с этим :

 list:any=[];
 getUsers(): void {
        this.usersService.getUsers()
        .subscribe(users => {

            this.users = users;
            const data: User[] = this.users;
            console.log('data',data)
            console.log("object",Object.keys(data));
            const keys: number[] = Object.keys(data) as any;
            console.log("keys",keys);
            console.log("users",this.users);
            for (let k in keys) {
                this.form.controls['id'].setValue(data[k].name);
                console.log(data[k]);
                this.list.push(data[k]);
            }
        });
    }