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（＆＃34; 1＆＃34;，＆＃34; 4＆＃34;，＆＃34; 7＆＃34; ...）但我不是＆＃ 39;找不到任何方法来搜索那些数组中的数据。

如果你能帮助我，那就太棒了：D

谢谢：）

Answer 1

在您获得数据后，您应该将其分配给班级中的某个媒体资源：

export class HomePage {
  cours: Home[]

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

}

Answer 2

你不能*ngFor反对。你应该从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]}););
  }    
}

Answer 3

终于找到了，我必须声明一个名为＆＃34; cours＆＃34;的新数组。

这是我的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');
  }

}

现在它完美无缺！谢谢你的答案：）

Ionic 2 / Angular 2显示阵列

3 个答案: