我必须为学校做一个移动应用程序,并且我选择使用Ionic 2。Ionic 2/Angular 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
谢谢:)
相反的console.log的'(赛道)',初始化组件领域:'this.cours = cours'。 –