角2：如何得到服务响应数据绑定到下拉

Question

Clientlist.service.ts

 getClientList() 
    { 
    let headers = new Headers(); 
    headers.append('Content-Type', 'application/json'); 
    let authToken = localStorage.getItem('auth_token'); 
    console.log(authToken); 
    headers.append('X-auth-Token', authToken) 
     return this._http.get('http://localhost:8080/api/v1/client/list?isClient=Y', {headers}) 
     .map((res) => { 
     var clientList = res; 
     console.log(clientList); 
    }) 
    } 

响应：

[{"userId":"mind.com","clientCode":"75","clientName":"ABC COMPANY, THE"},{"userId":"mind.com","clientCode":"51","clientName":"infotech"}] 

这里我得到的客户名单中的客户端列表，现在怎么我可以将此响应绑定到角度下拉列表中。请帮助我。

Answer 1

您需要创建以下客户端对象的对象，它变得更容易解析并显示在下拉列表中。

下面是客户端的模式：

export class Client 
{ 
userId: string; 
clientCode: string; 
clientName: string; 
} 

一旦你创建的对象，在你component.ts：

clients: Client[]; 
currentSelection: Client; 

ngOnInit() 
{ 
//... do your calls do get res(client list) 
var clientList = res; 
this.clients = JSON.parse(clientList); 
} 
onChange(value: Client) 
{ 
this.currentSelection = value; 
} 

然后做在乌拉圭回合的HTML代码以下后：

<select (change)="onChange($event.target.value)"> 
    <option *ngFor="let client of clients">{{client.clientName}}</option> 
</select> 

Answer 2

您可以简单地使用它像

<select [(ngModel)]="client.clientCode"> 
     <option value="" disabled selected>Select Client Name</option> 
     <option *ngFor="let user of ClientList" [value]="user.clientCode">{{user.clientName}}</option> 
</select>