Typescript 将http obervable响应转换为ngFor支持的阵列

我试图根据API响应动态加载select选项，对于http请求，我使用Angular5中的obervables

但将响应解析为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>

{{p[1]}

在此处选中Plunkr将起作用：

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

您可以访问

订阅

中的响应数据

更新的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>

你好{{name}
{{p['ROLE']}
热狗、薯条和苏打水
汉堡，奶昔和微笑
糖、香料和所有好吃的东西

this.roles'的价值是什么？@Niral Check Plunkr，我在这里添加了API调用