Question

第一次在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）

但可以在网络中获取数据

Answer 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请求）。

Answer 2

您已经在功能中订阅了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; 
    });
  }

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

2 个答案: