[英]Ionic 2/Angular 2 display array
I have to do a mobile application for school and I choosed to use Ionic 2 for this. 我必须为学校做一个移动应用程序,为此我选择使用Ionic 2。
I need to display the daily timetable/schedule. 我需要显示每日时间表/时间表。 For this, I'm using our intranet's API which returns a json, for exemple : 为此,我使用的是Intranet的API,该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": []
}
I successfully retrieve this in my application, but I dont find how to display of list of this. 我在我的应用程序中成功检索了此,但是我找不到如何显示此列表的信息。
Here is my /home/home.ts script : 这是我的/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)
})
}
}
My /models/home.ts : 我的/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;
}
My /providers/home-cours.ts 我的/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());
}
}
and finally my home.html : 最后是我的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>
I'm sure this is coming from the id ("1", "4", "7"...) but I don't find any way to search the datas in those arrays. 我确定这是从id(“ 1”,“ 4”,“ 7” ...)来的,但是我找不到任何方法来搜索这些数组中的数据。
If you could help me please it would be great :D 如果您能帮助我,那将是很棒的:D
Thank you :) 谢谢 :)
After you've obtained the data, you should assign it to a property in your class: 获得数据后,应将其分配给您类中的属性:
export class HomePage {
cours: Home[]
constructor(public navCtrl: NavController, private HomeCours: HomeCours) {
HomeCours.load().subscribe(cours => this.cours = cours);
}
}
You can't *ngFor
object. 您不能*ngFor
对象。 You should make an array from object. 您应该根据对象创建数组。
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]}););
}
}
Finally found, I had to declare a new array named "cours". 终于找到了,我不得不声明一个名为“ cours”的新数组。
Here is my cours.ts : 这是我的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');
}
}
And now it's perfectly working ! 现在一切正常! Thank you for your answers :) 谢谢您的回答 :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.