Question

我目前正在尝试使用* ngFor遍历数组，但是页面上没有任何显示。这是HTML的代码

<ion-header>
  <ion-navbar>
    <ion-title>
      Recent News
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
      <ion-card *ngFor="let article of articles">
        <ion-card-content>
          <h2>{{article.title}}</h2>
          <p>{{article.description}}</p>
        </ion-card-content>
      </ion-card>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <p>Powered by NEWS API</p>
  </ion-toolbar>
</ion-footer>

以下是.ts（打字稿？）中的代码

 getNews() {
    this.rest.getNews()
    .then(result => {
      this.news = result;
      console.log(this.news);
    });
  }

this.news的控制台日志为this。但是，如果我console.log(this.news.articles[0])，this is the output instead。

是否可以使我从0迭代到9，而不是使用ngFor？还是我错过了什么？

编辑： home.ts如下

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { RestProvider } from '../../providers/rest/rest';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  news: any;
  errorMessage: string;


  constructor(public navCtrl: NavController, public rest:RestProvider) {
    this.getNews();
  }

  getNews() {
    this.rest.getNews()
    .then(result => {
      this.news = result;
      console.log(this.news.articles[0]);
    });
  }


}

Answer 1

只需用新闻替换ngFor中的文章。您要显示的数据在新闻数组中：

<ion-content padding>
      <ion-card *ngFor="let article of news.articles">
        <ion-card-content>
          <h2>{{article.title}}</h2>
          <p>{{article.description}}</p>
        </ion-card-content>
      </ion-card>
</ion-content>

Answer 2

采用另一个名为rm -- **/!(*.jpg|*.gif|*.png)

的变量

articels

与此相关，您的html应该可以正常工作。

遍历Angular Ionic中的数组

2 个答案: