Angular 2：如何从 API 获取服务响应数据到 Select Option

Question

api.services.ts listNama() {     return this.http.get(this.BaseURL + 'welcome/getnama')            .pipe(map(response => {                 return response;            })); }我得到这样的回应{"status": "OK","Output": [    {        "id_pemborong": "1569079912",        "nama": "ayub"    },    {        "id_pemborong": "1569125109",        "nama": "Hartono"    },    {        "id_pemborong": "1569319859",        "nama": "agus"    },    {        "id_pemborong": "1569416787",        "nama": "joko"    }   ] }我如何将此响应绑定到角度选择选项。帮助

Answer 1

服务

listNama() {

    return this.http.get(this.BaseURL + 'welcome/getnama')

}

然后在你的组件中订阅它

/decalre a variable

NameList:any[]=[];

/ replace service with your servicename

this.service.function.subscribe(arg => this.NameList = arg);

并在模板中

<select  [(ngModel)]="selected" (change)="onChange($event)">

<option [label] ="nama" *ngFor="let item of NameList" [selected]="selected" 

  [value]="nama">{{nama}}

</option>

</select>

Answer 2

Ts

    NameList:any[]=[];

    listNama() {

    return this.http.get(this.BaseURL + 'welcome/getnama')

      .pipe(map(response => {

      this.NameList= response.Output;

      }));

     }

html

    <select  [(ngModel)]="selected" (change)="onChange($event)">

       <option [label] ="nama" *ngFor="let item of NameList" [selected]="selected" [value]="nama">

          {{nama}}

       </option>

    </select>