错误错误:无法找到'object'类型的不同支持对象'[object Object]'。 NgFor仅支持绑定到诸如Arrays之类的Iterables

时间:2017-07-19 05:58:02

标签: angular ionic-framework ionic2

第一次在stackoverflow中提问。 我的ionic2应用程序遇到了问题。我可以在控制台ald中获得json,但是当我希望它在我的应用程序中显示时,news.html遇到了一些问题。

提供商/新闻data.ts

@Injectable()
export class NewsDataProvider {
    data:any;

  constructor(public http: Http) {
  }

  getUsers() {
    if (this.data) {
      return Promise.resolve(this.data);
    }
    return new Promise(resolve => {
      this.http.get('url').map(res => res.json()).subscribe(data => {
          this.data = data;
          resolve(this.data);
          console.log('success');
        });
    });
  }

}

news.ts

@IonicPage()
@Component({
  selector: 'page-news',
  templateUrl: 'news.html',
})
export class NewsPage {
    users:any;
  constructor(public navCtrl: NavController, public navParams: NavParams,public newsData:NewsDataProvider){
    this.getUsers();
  }

  getUsers() {
      this.newsData.getUsers().then(data => {
        this.users = data;
      });
  }

}

news.html

<ion-header>
  <ion-navbar color="danger" no-border-bottom>
    <button ion-button menuToggle>
      <ion-icon name="ios-contact"></ion-icon>
    </button>

    <ion-title></ion-title>

  </ion-navbar>

  <ion-toolbar no-border-top>
    <ion-searchbar color="danger"
                   [(ngModel)]="queryText"
                   (ionInput)="updateSchedule()"
                   placeholder="Search">
    </ion-searchbar>
  </ion-toolbar>
</ion-header>


<ion-content padding>
  <ion-item *ngFor="let user of users">
    {{user.title}}
  </ion-item>
</ion-content>

控制台节目

  

错误错误:无法找到不同的支持对象'[object Object]'   类型'对象'。 NgFor仅支持绑定到Iterables,例如   阵列。       在NgForOf.ngOnChanges(common.es5.js:1689)       at checkAndUpdateDirectiveInline(core.es5.js:10790)       at checkAndUpdateNodeInline(core.es5.js:12216)       at checkAndUpdateNode(core.es5.js:12155)       在debugCheckAndUpdateNode(core.es5.js:12858)       在debugCheckDirectivesFn(core.es5.js:12799)       在Object.eval [as updateDirectives](NewsPage.html:22)       at Object.debugUpdateDirectives [as updateDirectives](core.es5.js:12784)       在checkAndUpdateView(core.es5.js:12122)       在callViewAction(core.es5.js:12485)

但可以在网络中获取数据

2 个答案:

答案 0 :(得分:1)

此错误表示您在object上使用ngFor,但ngFor仅支持Array等可重复使用。

我从您提供的url进行测试,并发现您应该从res.json().data检索数组(应该是您想要在ngFor使用的数据{1}})。请参考以下更改。

this.http.get('http://bravonet.my/ct3/api/news?api_key=123').map(res => res.json().data).subscribe(data => {
  this.data = data;
  resolve(this.data);
  console.log('success');
});

Plunker Demo 不会通过Chrome确认这一点,因为它在使用https 时会默认阻止http请求)。

答案 1 :(得分:0)

您已经在功能中订阅了http请求。无需再次创建承诺并返回。只需从news-data.ts返回http请求,然后从news.ts文件

订阅即可
getUsers() {
    if (this.data) {
      return Promise.resolve(this.data);
    }
    return this.http.get('http://bravonet.my/ct3/api/news?api_key=123').map(res => res.json())
}

现在就像这样抓住它

  getUsers() {
      this.newsData.getUsers().subscribe(data => {
      this.users = data; 
    });
  }