渲染外部JSON卡離子3

我很新的離子我現在開始一個測試項目，以建立一個應用程序，從外部服務器通過HTTP 要求讀取JSON。通過遵循教程，我現在可以獲取JSON，但是我找不到適當的教程指導如何將卡片渲染到頁面中。我的代碼如下：渲染外部JSON卡離子3

我需要一些實用想法如何呈現卡片。

頁/家庭/ home.html的

<ion-header> 
    <ion-navbar> 
    <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>Home</ion-title> 
    </ion-navbar> 
</ion-header> 
<ion-content padding> 
    <button ion-button block (click)="fetchResult()">Fetch External Data</button> 
    <ion-cards> 
     <ion-card> 
      <img src="img/image-url-from-json.png"/> 
      <ion-card-content> 
      <ion-card-title> 
       Card Title 
       </ion-card-title> 
      <p> 
       Card content from JSON goes here 
      </p> 
      </ion-card-content> 
     </ion-card> 
    </ion-cars> 
</ion-content>

頁/家庭/ home.ts

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { HTTP } from '@ionic-native/http'; 
import { AlertController } from 'ionic-angular'; 

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

    constructor(
    private http: HTTP, 
    public alertCtrl: AlertController 
) {}; 

    fetchResult() { 
     this.http.get('https://www.reddit.com/r/gifs/top/.json?limit=10&sort=hot', {}, {}) 
     .then(data => { 
     this.posts = data.data.children; 
     }) 
     .catch(error => { 
     this.showError(error.status, error.error); 
     }); 
    }; 

    showError(title, msg) { 
    let alert = this.alertCtrl.create({ 
     title: title, 
     subTitle: msg, 
     buttons: ['Close'] 
    }); 
    alert.present(); 
    } 
}

來源

2017-08-01 noob

我認爲你犯了一個錯字：''ion-cars''應該是'ion-cards'。除此之外，您可以使用'ngFor'指令：' ..' – devqon

感謝您指出我的錯字，也感謝您的提示。 – noob

您可以使用* ngFor動態創建卡。 Angular template syntax

<ion-card *ngFor="let post of posts"> 
    <img src="{{post.img}}"/> 
    <ion-card-content> 
    <ion-card-title> 
     Card Title 
     </ion-card-title> 
    <p> 
     {{post.content}} 
    </p> 
    </ion-card-content> 
</ion-card>

來源

2017-08-01 15:12:48

當http.get返回一個Observable時，您正在使用promise。你應該使用這個observable或者調用observable的toPromise函數。 –

在離子的http服務方法得到/後返回一個承諾。 https://ionicframework.com/docs/native/http/ –

謝謝，那現在就像一個魅力。 – noob

渲染外部JSON卡離子3

回答

相關問題