Javascript 角度2：如何从API获取服务响应数据到选择选项

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"
    }
   ]
 }

如何将此响应绑定到angular中的Select选项。帮助

Ts

名称列表：任意[]=[]；
listNama（）{
返回this.http.get（this.BaseURL+'welcome/getnama'）
.pipe（映射（响应=>{
this.NameList=response.Output；
}));
}

Html

{{nama}}

服务

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>

{{nama}}

你的

地图

什么也没做。您需要将其映射到

响应中的
输出
，然后订阅可观察对象以获取值

api.service.ts

listNama（）{
返回此.http.get（this.BaseURL+'welcome/getnama'）.pipe(
映射（response=>response.Output）
);
}

然后像这样在组件中订阅它

从'path/to/api/service'导入ApiService；
...
纳米主义者：纳米[]；
构造函数（私有apiService:apiService）{}
恩戈尼尼特（）{
this.service.listNama（）.subscribe（数据=>{
this.namalis=数据；
});
}

其中，
Nama
界面如下所示

{
"status": "OK",
"Output": [
    {
        "id_pemborong": "1569079912",
        "nama": "ayub"
    },
    {
        "id_pemborong": "1569125109",
        "nama": "Hartono"
    },
    {
        "id_pemborong": "1569319859",
        "nama": "agus"
    },
    {
        "id_pemborong": "1569416787",
        "nama": "joko"
    }
   ]
 }

导出接口Nama={
id_pemborong：字符串；
nama：字符串；
}

然后在模板中使用
namaList
在
选择中显示列表


{{item.nama}}
pipe在这里有什么用…？为什么我从这个.service.listNama（）得到了服务错误？你把服务注入你的组件了吗？我得到了。很抱歉