Ionic 2/Angular 2顯示陣列

Question

我必須爲學校做一個移動應用程序，並且我選擇使用Ionic 2。

我需要顯示每日時間表/時間表。對於這一點，我使用的是我們的內聯網的API，它返回一個JSON，用於爲例：

{ 
    "1": [], 
    "4": { 
     "matiere": "M4201", 
     "prof": "LANDRÉ Jérôme", 
     "salle": "H201", 
     "evaluation": "N", 
     "texte": null, 
     "commentaire": null, 
     "type": "td", 
     "fin": 7 
    }, 
    "7": { 
     "matiere": "M4204", 
     "prof": "GOMMERY Patrice", 
     "salle": "H205", 
     "evaluation": "N", 
     "texte": null, 
     "commentaire": null, 
     "type": "tp", 
     "fin": 10 
    }, 
    "13": { 
     "matiere": "", 
     "prof": "", 
     "salle": "****", 
     "evaluation": "N", 
     "texte": "PROJETS", 
     "commentaire": null, 
     "type": "CM", 
     "fin": 19 
    }, 
    "16": [], 
    "19": [], 
    "22": [] 
} 

我在我的應用程序成功地檢索這一點，但我不覺得如何顯示的這個列表中。

這裏是我的/home/home.ts腳本：

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 

import { Home } from '../../models/home'; 
import { HomeCours } from '../../providers/home-cours'; 

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

    constructor(public navCtrl: NavController, private HomeCours: HomeCours) { 
    HomeCours.load().subscribe(cours => { 
     console.log(cours) 
    }) 
    } 

} 

我/models/home.ts：

/** 
* Created by corentin on 17/03/2017. 
*/ 
//récupère la liste des cours sur http://intranet.iut-troyes.univ-reims.fr/api/edtjour/< id de la personne qui consulte > 

export interface Home { 
    matiere: string; 
    prof: string; 
    salle: string; 
    evaluation: string; 
    texte: string; 
    commentaire: string; 
    type: string; 
    fin: number; 
} 

我/providers/home-cours.ts

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { Observable } from 'rxjs/Rx'; 
import 'rxjs/add/operator/map'; 

import { Home } from '../models/home'; 

/* 
    Generated class for the HomeCours provider. 

    See https://angular.io/docs/ts/latest/guide/dependency-injection.html 
    for more info on providers and Angular 2 DI. 
*/ 
@Injectable() 
export class HomeCours { 
    coursApiUrl = 'https://api.corentincloss.fr/intranet/edt.php?id='; 
    constructor(public http: Http) { 
    console.log('Hello HomeCours Provider'); 
    } 

    load(): Observable<Home[]> { 
    return this.http.get(`${this.coursApiUrl}closs006`).map(res => <Home[]>res.json()); 
    } 

} 

最後我的home.html：

<ion-header> 
    <ion-navbar> 
    <ion-title>Mes cours</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
    <h2>Emploi du temps du jour.</h2> 
    <hr /> 
    <ion-list> 
    <div ion-item *ngFor="let cour of cours"> 
     <h2>{{ cour.matiere }}</h2> 
    </div> 
    </ion-list> 
</ion-content> 

我確定這是來自id（「1」，「4」，「7」...），但我沒有找到任何方式來搜索這些數組中的數據。

如果你能幫助我請這將是巨大的：d

謝謝:)

Answer 1

最後發現，我不得不聲明一個名爲「cours」的新數組。

這裏是我的cours.ts：

import { Component } from '@angular/core'; 
import { NavController, NavParams } from 'ionic-angular'; 
import { CoursService } from '../../providers/cours-service'; 

/* 
    Generated class for the Cours page. 

    See http://ionicframework.com/docs/v2/components/#navigation for more info on 
    Ionic pages and navigation. 
*/ 
@Component({ 
    selector: 'page-cours', 
    templateUrl: 'cours.html', 
    providers: [CoursService] 
}) 
export class CoursPage { 
    public cours: any; 
    public heures: any; 

    constructor(public navCtrl: NavController, public navParams: NavParams, public coursService: CoursService) { 
    this.loadCours(); 
    console.log(coursService); 
    } 

    loadCours(){ 
    this.coursService.load() 

     .then(data => { 
     let cours = new Array(); 
     for (let key in data) { 
      cours.push(data[key]); 
     } 
     this.cours = cours; 
     }); 
    } 

    ionViewDidLoad() { 
    console.log('ionViewDidLoad CoursPage'); 
    } 

} 

，現在它的工作完美！謝謝你的答案:)

Answer 2

你已經獲得的數據後，你應該把它分配給你的類屬性：

export class HomePage { 
    cours: Home[] 

    constructor(public navCtrl: NavController, private HomeCours: HomeCours) { 
    HomeCours.load().subscribe(cours => this.cours = cours); 
    } 

} 

Answer 3

您不能*ngFor對象。你應該從對象中創建一個數組。

export class HomePage { 
    cours: Home[] = [] 

    constructor(public navCtrl: NavController, private HomeCours: HomeCours) { 
    HomeCours.load().subscribe((data: any) => for (let key in data) this.cours.push({key: key, value: cours[key]});); 
    }  
}