ionic混合APP开发数据绑定循环

数据绑定循环

• 前端显示

<ion-card *ngFor="let f of feeds">
    <ion-item>
      <ion-avatar item-start>
        <img src="{{f.HeadFace}}" alt="">
      </ion-avatar>
      <p>{{f.UserNickName}}
        <ion-icon name="more" class="more_button"></ion-icon>
      </p>
    </ion-item>
    <h2>{{f.contentTitle}}</h2>
    <ion-card-content>
      <p>{{f.ContentSummary}}</p>
    </ion-card-content>
    <ion-row>
      <ion-col col-8 center text-left>
        <ion-note>
            {{f.LikeCount}}&nbsp;赞同&nbsp;&nbsp;.&nbsp;&nbsp;{{f.Com}}&nbsp;评论&nbsp;&nbsp;.&nbsp;&nbsp;关注
        </ion-note>
      </ion-col>
      <ion-col col-4></ion-col>
    </ion-row>
  </ion-card>

• JS交互

ionViewDidLoad(){
    this.getFeeds();
  }

getFeeds() {
    var loading = super.showLoading(this.loadingCtrl, "加载中");
    this.rest.getFeeds()
      .subscribe(
        f => {
          this.feeds = f;
          loading.dismiss();
        },
        error => this.errorMessage = <any>error)
  }