Преобразовать HTTP-ответ в массив, поддерживаемый ngFor

Question

Я пытаюсь загрузить опцию выбора динамически на основе ответа API, а для http-запроса я использую obervables в Angular5.

Но при разборе ответа в опцию select выдает ошибку ниже.

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays




ngOnInit() {  

    this.roles = this.roleService.getRoles();
    console.log("Roles Are here",this.roles);
}
}

html

 <select id="userrole" class="form-control " name="userrole" formControlName="userrole" data-live-search="true">
          <option *ngFor="let p of roles" value={{p[0]}}>{{p[1]}}</option>
        </select>

Проверьте Plunkr здесь код

Answer 1

Ниже будет работать:

this.roleService.getRoles().subscribe(roles => {
  this.roles = roles;
});

Вы можете получить доступ к данным ответа в subscribe,

Обновленный HTML:

<div>
  <h2>Hello {{name}}</h2>
</div>
<div class="container row">
  <div class="col-md-6">
    <form [formGroup]="userRegform" novalidate>
      <fieldset class="form-group">
        <select id="userrole" class="form-control " name="userrole" formControlName="userrole" data-live-search="true">
          <option *ngFor="let p of roles" [value]="p['ROLE_ID']">{{p['ROLE']}}</option>
        </select>
      </fieldset>
      <fieldset class="form-group">
        <select class="form-control selectpicker" data-live-search="true">
          <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
          <option data-tokens="mustard">Burger, Shake and a Smile</option>
          <option data-tokens="frosting">Sugar, Spice and all things nice</option>
        </select>
      </fieldset>
    </form>
  </div>
</div>