尝试从我得到的获取请求访问数据找不到不同的支持对象'[object Object]'类型为 'object'

Question

我发现了其他一些问题的问题，但没有帮助。

这是我的list.page.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';
@Component({
  selector: 'app-list',
  templateUrl: 'list.page.html',
  styleUrls: ['list.page.scss']
})
export class ListPage implements OnInit {

  private selectedItem: any;
  private icons = [
    'flask',
    'wifi',
    'beer',
    'football',
    'basketball',
    'paper-plane',
    'american-football',
    'boat',
    'bluetooth',
    'build'
  ];
  public items: Array<{ title: string; note: string; icon: string }> = [];
  fostan: Observable<any>;
  constructor(public httpClient: HttpClient){
  const httpOptions = {
headers: new HttpHeaders({
  'Content-Type':  'application/json',
  'Authorization': 'Basic ' + btoa('username:password')
})
}
this.fostan = this.httpClient.get('https://www.fostania.com/api/items/',httpOptions);
this.fostan.subscribe(data => {
  this.fostan = data;
console.log('my data: ', data);
})
}
  ngOnInit() {
  }
  // add back when alpha.4 is out
  // navigate(item) {
  //   this.router.navigate(['/list', JSON.stringify(item)]);
  // }
}

这是我尝试从.html文件拨打它的方式

  <ion-list>
  <button ion-item *ngFor="let fos of fostan">
  title  {{ fos.title }}
  </button>
</ion-list>

，但我在控制台中遇到了这个错误：

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

因此，如何将此结果转换为数组以便能够从HTML文件访问它？

Answer 1

fostan 是类型 observable ，这不是一个数组：

更改行：

this.fostan = data;

：

this.items = data;

和

<button ion-item *ngFor="let fos of fostan">

：

<button ion-item *ngFor="let fos of items">

Answer 2

当组件安装 this.fostan是可观察的，因此let fos of fostan发生在可观察的。

您应该将订阅数据移至新实例变量

例如

  this.items = data;
  ...
  *ngFor="let fos or items"