Угловые 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.Пожалуйста, помогите мне.

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>