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"

尝试从获取请求中获取数据我无法找到类型为“对象”的其他支持对象“ [对象对象]”

2 个答案: