如何将数据从JSON响应绑定到下拉列表Angular2中？

Question

我想将从Web服务器接收的数据绑定到前端应用程序中，但是数据显示为未定义。 数组本身占用了可用对象的数量，数据绑定到了组件，但没有绑定到前端本身

这是我的模板：

form.component.html

    <label>Group ID</label>
      <div class="row" *ngIf="roles.length">
        <div class="col-md-4">
    <select [(ngModel)]="roles" name="group_id" class="form-control" [formControl]="complexForm.controls['group_id']" data-width='200px'>
    <option *ngFor="let role of roles" [value]="role.id">  
    {{role.name}}
    </option>
    </select>
        </div>
      </div>

数据看起来像这样，我应该根据值显示名称

export class Group {
id: string;
name: string;
pwd_expiry_in_days: string;
}

我的组件看起来像这样，正在接收数据，并且我能够在组件内完美地记录数据

  public roles: Array<Group> = [];
  currentGroup : Group;


   private getGroups() : Observable<any> {
    console.log("In Groups");
    let _url = "myURL";
    let headers = new Headers();
    headers.append('X-User', sessionStorage.getItem('username'));
    headers.append('X-Token', sessionStorage.getItem('token'));
    headers.append('X-AccessTime', sessionStorage.getItem('AccessTime'));
    headers.append('Content-Type', 'application/json');
    let options = new RequestOptions({ headers: headers });

    return this.http.get(_url, options)
    .map(response => {
      var responseAsObject = response.json();
      console.log(responseAsObject); <--- Good response
      return responseAsObject;
    });
}


ngOnInit(){
  this.getGroups().subscribe(roles => { 
    this.roles = roles;
    console.log(this.roles); <--- Logs perfectly fine
  });
}

现在，我有了包含要显示在前端的JSON对象数组的this.roles ，为什么它无法根据模板中的内容显示它们？

谢谢！

Answer 1

尝试这个：

public roles$: Observable<Array<Group>>;
currentGroup : Group;


private getGroups() : Observable<Group[]> {
    console.log("In Groups");
    let _url = "myURL";
    let headers = new Headers();
    headers.append('X-User', sessionStorage.getItem('username'));
    headers.append('X-Token', sessionStorage.getItem('token'));
    headers.append('X-AccessTime', sessionStorage.getItem('AccessTime'));
    headers.append('Content-Type', 'application/json');
    let options = new RequestOptions({ headers: headers });

    return this.http.get(_url, options)
               .map(response => response.json());
}


ngOnInit(){
  this.roles$ = this.getGroups()
                    .do(console.log);
}

...

<label>Group ID</label>
<div class="row" *ngIf="(roles$ | async)?.length">
  <div class="col-md-4">
    <select [(ngModel)]="roles" name="group_id" class="form-control" [formControl]="complexForm.controls['group_id']" data-width='200px'>
        <option *ngFor="let role of ($roles | async)" [value]="role.ID">{{role.NAME}}</option>
    </select>
  </div>
</div>

Answer 2

在异步功能中接收到控制台日志后，它们可能会显示数据。 您在控制台日志中看到的最有可能被称为。 请您尝试：

return new Promise<any>((resolve,reject) =>{
   this.http.get(_url, options)
   .map(response => {
      var responseAsObject = response.json();
      resolve(responseAsObject);
    });
    .toPromise()
    .catch(error =>{
      reject(error);
    })
})

ngOnInit(){
  this.getGroups().then(roles => { 
    this.roles = roles;
    console.log(this.roles);
  });
}