尝试从 get 请求访问数据，我得到 Cannot find a differ supporting object '[object Object]' of type 'object'

Question

我发现了一些针对同一问题的其他问题，但 none 有所帮助。

这是我的 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"

尝试从 get 请求访问数据，我得到 Cannot find a differ supporting object '[object Object]' of type 'object'

Trying to access data from get request i get Cannot find a differ supporting object '[object Object]' of type 'object'

typescript

ionic-framework

angular

ionic4