Angular 2: Как получить данные ответа сервиса из API в опцию Select

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

service

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);

и в Template

<select  [(ngModel)]="selected" (change)="onChange($event)">
<option [label] ="nama" *ngFor="let item of NameList" [selected]="selected" 
  [value]="nama">{{nama}}
</option>
</select>

Answer 2

Ваш map ничего не делает.Вместо этого вам нужно map указать Output в вашем response, а затем подписаться на Observable, чтобы получить значение.

api.service.ts

listNama() {
    return this.http.get(this.BaseURL + 'welcome/getnama').pipe(
        map(response => response.Output)
    );
}

Затем подпишитесь на него в вашем компоненте следующим образом:

import ApiService from 'path/to/api/service';
...

    namaList: Nama[];

    constructor(private apiService: ApiService) { }

    ngOnInit() {
        this.service.listNama().subscribe(data => {
            this.namaList = data;
        });
    }

, где интерфейс Nama будет выглядеть следующим образом

export interface Nama = {
    id_pemborong: string;
    nama: string;
}

Затем используйте namaList в своем шаблоне, чтобыотобразить список в select.

<select>
    <option *ngFor="let item of namaList" [value]="item.id_pemborong">{{item.nama}}</option>
</select>

Answer 3

Ц

    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>