角度2：ドロップダウンにGETサービス応答データをバインドする方法

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

私は今、どのように、clientListにクライアントのリストを取得しています私は角度2.pleaseのドロップダウンにこの応答をバインドできますか？

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

のように簡単に使用できます。