离子2(角2打字稿) - 无法应用数据查看

时间:2017-08-07 14:29:20

标签: angular typescript ionic-framework ionic2

我因为离子2而陷入困境。 我有一个问题,我想使用*ngFor使用文章标题和其他数据(如缩略图等)呈现卡片组件。 当我在阵列中使用硬编码值时,显示卡片。但是,当我使用REST API卡时,无法呈现。成功检索数据。

在角度1中是否有$scope.$digest();用于对角度2 {Ionic 2} $scope进行更改 或者如何得到我想要的东西?



import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as $ from 'jquery';
import * as moment from 'moment';
var itemList =[];
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})



export class HomePage  {
  

  constructor(public navCtrl: NavController) {
    moment.locale('id');
    this.getNews();
  }


  getNews(){
    $.ajax({
      url: secret_api_url ,
      dataType:"jsonp",
      method:"get",
      success:(data =>{
        var post = data.posts;
        post.forEach(function(p){
          p.date = moment(p.date).format('lll');
          itemList.push(p);
        });
        // itemList = post;

      }),
      error:(err =>{
        console.log("Error",err);
      })
    });
  }










}

    <ion-card padding *ngFor="let item of itemList;">

    <ion-card-content>
      <label style="color:white;">
        {{i}}
        <label class="timestamp">{{ item.date }}</label>
      </label><br>
      <small>
            <i>
            {{ item.short_desc }}
            </i>
      </small>
      <ion-card-title>
        {{item.title}}
      </ion-card-title>
    </ion-card-content>
    <img src="{{item.img_url}}"/>
  </ion-card>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

确保将其余API中的数据正确转换为类的实例:

export class Article{
    constructor(public id: string, public title: string) {}
}

// Your component:

this.articles: Array<Articles> = [];

ngOnInit() {
    this.articleService.getArticles()
        .subscribe(articles => { 
                this.articles = articles.map(item => new Article(item.id, item.title);
            }); 
        });      
}