如何在 Ionic 2 中查看 JSON 数据

Question

嗨，我有 JSON 数据，

我想在我的 Ionic 2 应用程序上显示，但我无法显示来自 JSON 数据的少量数据。 一切都工作正常，但JST我无法查看很少的数据。 来自 JSON 数据的班级和天数数据。

1. json data link：https：//drive.google.com/file/d/0BzjLMYUKOU1mc1loVVpWbmxvVFU/view
2. 离子 2 HTML文件链接：https：//drive.google.com/file/d/0BzjLMYUKOU1mUWFHZVFHVXB4T3M/view

3. 离子 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>