站间列车

Question

嗨我有json数据，我想在我的Ionic 2应用程序上显示，但我无法显示json数据中的少量数据。每件事都很好但是我无法查看少量数据。来自json数据的类和天数据。

json数据链接：https://drive.google.com/file/d/0BzjLMYUKOU1mc1loVVpWbmxvVFU/view
离子2 html 文件链接：https://drive.google.com/file/d/0BzjLMYUKOU1mUWFHZVFHVXB4T3M/view

离子2 html文件ts链接：https://drive.google.com/file/d/0BzjLMYUKOU1mTFdNdFJMeGdjWTQ/view

离子2 html代码

站间列车

<ion-card-content >
  <div *ngFor="let tra of train1">
  <h3><b>Train: {{tra.no}}</b></h3><br>
  <table>
     <tr>
        <td><b>Train Name :-  </b> </td>
        <td>{{tra.name}}</td>
        <br>
    </tr>

    <tr>
        <td><b>Train No :-  </b></td>
        <td>{{tra.number}}</td>
        <br>
   </tr>
   <tr>
         <td><b>Source Station Name :-  </b></td>
         <td>{{tra.from.name}}</td>
         <br>
   </tr>
   <tr>
         <td><b>Destination Station Name :-  </b></td>
         <td>{{tra.to.name}}</td>
         <br>
   </tr>
   <tr>
         <td><b>Source Departure Time :-  </b></td>
         <td>{{tra.src_departure_time}}</td>
         <br>
   </tr>
   <tr>
         <td><b>Destination Arrivali Time:-  </b></td>
         <td>{{tra.dest_arrival_time}}</td>
         <br>
   </tr>
 </table>

   <table border="1" text-center width="100%">
    <tr>
      <td><b>Class</b></td> 
      <td><b>a1</b></td> 
      <td><b>a2</b> </td>
      <td><b>3a</b> </td>
      <td><b>4a</b> </td>
      <td><b>5a</b> </td>
      <td><b>6a</b> </td>
      <td><b>7a</b> </td>
      <td><b>a8</b> </td>


    </tr>
        <tr  >
            <td *ngFor="let ca of class_arr">{{train1[ca].classes.available}}</td>
        </tr>
 </table>

   <table border="1" text-center width="100%">
    <tr>
        <td><b>Day's</b></td> 
        <td><b>SUN</b></td>
        <td><b>MON</b></td> 
        <td><b>TUE</b></td>
        <td><b>WED</b></td> 
        <td><b>THU</b></td>
        <td><b>FRI</b></td> 
        <td><b>SAT</b></td>
    </tr>
    <tr >
      <!--<td><b>Runs</b></td> -->
        <td>y</td>
        <td>y</td>
        <td>n</td>
        <td>y</td>
        <td>n</td>
        <td>y</td>
        <td>n</td>
        <td>y</td>

    </tr>
 </table>

离子2 ts代码：

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

/*
  Generated class for the TrainBwStationDetails page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'page-train-bw-station-details',
  templateUrl: 'train-bw-station-details.html'
})
export class TrainBwStationDetailsPage {
TrainBwStation:any;
train1:any;
train_total:any;
class_arr:any[];
days_arr:any[];
  constructor(public navCtrl: NavController, public navParams: NavParams) 
  {


    this.TrainBwStation=this.navParams.get("data");

  }

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


}

json数据：

{
    "train": [
        {
            "number": "16587",
            "to": {
                "code": "FA",
                "name": "FALNA"
            },
            "classes": [
                {
                    "available": "Y",
                    "class-code": "2A"
                },
                {
                    "available": "N",
                    "class-code": "2S"
                },
                {
                    "available": "Y",
                    "class-code": "SL"
                },
                {
                    "available": "N",
                    "class-code": "1A"
                },
                {
                    "available": "N",
                    "class-code": "FC"
                },
                {
                    "available": "N",
                    "class-code": "CC"
                },
                {
                    "available": "N",
                    "class-code": "3E"
                },
                {
                    "available": "Y",
                    "class-code": "3A"
                }
            ],
            "days": [
                {
                    "runs": "Y",
                    "day-code": "MON"
                },
                {
                    "runs": "N",
                    "day-code": "TUE"
                },
                {
                    "runs": "N",
                    "day-code": "WED"
                },
                {
                    "runs": "N",
                    "day-code": "THU"
                },
                {
                    "runs": "N",
                    "day-code": "FRI"
                },
                {
                    "runs": "Y",
                    "day-code": "SAT"
                },
                {
                    "runs": "N",
                    "day-code": "SUN"
                }
            ],
            "src_departure_time": "07:50",
            "name": "YPR-BKN BI WEEKLY EXP SPL",
            "from": {
                "code": "KYN",
                "name": "KALYAN JN"
            },
            "no": 1,
            "dest_arrival_time": "21:46",
            "travel_time": "13:56"
        },

    ],
    "error": "",
    "response_code": 200,
    "total": 7
}

Answer 1

对于classes，您必须执行以下操作。这里tra是您的根对象。

<tr >
  <td *ngFor="let ca of tra.classes">{{ca.available}}</td>
</tr>

对于days，您必须执行以下操作。这里tra是您的根对象。

<tr>
  <td *ngFor="let d of tra.days">{{d.day-code}}</td>
</tr>

如何在离子2中查看json数据

站间列车

1 个答案: