如何使用 ngfor 将嵌套的 JSON 对象绑定到 <ion-item>

Question

我正在尝试绑定 Firstbatting 对象，但该值未显示：

我想像这样访问 {{item.Firstbatting.Name}}，你知道怎么做吗？

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { PCAService } from '../../providers/pca-service';

@Component({
  selector: 'page-score-card',
  templateUrl: 'score-card-input.html',
  providers: [PCAService]
})
export class ScoreCardInputPage {

  selectedItem: any;
  public resultYear: any;
  public resultDate: any;
  public resultScoreCard: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, private pcaService: PCAService) {
  this.selectedItem = navParams.get('item');
  this.GetMatchPlayedYears();
  }

    GetMatchPlayedYears(){
        console.log('Service Call from GetMatchPlayedYears() up coming ts');
        this.pcaService.GetMatchPlayedYears()
        .then(data => {
        this.resultYear = data;
      });
    }

    GetMatchDatesByYear(strYear){
      //NavController.name.disabled = false;
      this.selectedItem = strYear;
      console.log('Service Call from GetMatchDatesByYear(strYear) up coming ts');
      this.pcaService.GetMatchDatesByYear(strYear)
      .then(datedata => {
      this.resultDate = datedata;
    });
   }

    GetScorecard(MatchOID){
      this.selectedItem = MatchOID;
      console.log('Service Call from GetMatchDatesByYear(strYear) up coming ts');
      this.pcaService.GetScorecard(MatchOID)
      .then(scorecard => {
      this.resultScoreCard = scorecard;
    });
   }
}

<ion-header>
  <ion-navbar color="danger">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title><h5>Score Card</h5></ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<ion-list>
  <ion-item>
    <ion-label>Year</ion-label>
    <ion-select [(ngModel)]="Year" (ngModelChange)="GetMatchDatesByYear($event)">
      <ion-option *ngFor="let item of resultYear; let i = index" value={{item.Year}}>{{item.Year}}</ion-option>
    </ion-select>
  </ion-item>

  <ion-item>
    <ion-label>Date</ion-label>
    <ion-select  [(ngModel)]="Date" (ngModelChange)="GetScorecard($event)">
      <ion-option *ngFor="let item of resultDate; let i = index" value={{item.MatchOID}}>{{item.Date}}</ion-option>     
    </ion-select>
  </ion-item>
</ion-list>

<ion-list>
  <ion-item *ngFor="let item of resultScoreCard.FirstBatting;">
       <p><b>{{item.Name}}</b> </p>        
  </ion-item>
</ion-list>

<ion-list visible=false>
    <ion-item-divider >
      First Batting
    </ion-item-divider>
      <ion-item  *ngFor="let item of resultScoreCard.FirstBatting; let i = index">
          <p><b>{{item.Name}}</b></p>
      </ion-item>
</ion-list>
</ion-content>

下面是我的示例 Json 对象，这个对象代表板球记分卡，我想将这个对象绑定到像 Cricinfo.com 这样的记分卡格式

http://www.espncricinfo.com/big-bash-league-2016-17/engine/match/1023585.html

{
   "FirstBatting": [
      {
         "Balls": 1,
         "BowledBy": "Sathish Kumar Lingam",
         "BowledByOID": 0,
         "Duration": 0,
         "Fours": 0,
         "Name": "Vijayakumar Suryanarayanan",
         "OID": 600000000027,
         "OutBy": "",
         "OutByOID": 0,
         "Runs": 0,
         "Sixes": 0,
         "StrikeRate": 0,
         "wktDetails": "Bowled"
      },
      {
         "Balls": 25,
         "BowledBy": "Sriram Venkatraman",
         "BowledByOID": 600000000000,
         "Duration": 0,
         "Fours": 0,
         "Name": "Rajesh Vinayagam",
         "OID": 600000000013,
         "OutBy": "Amalan Nagarajan",
         "OutByOID": 600000000000,
         "Runs": 21,
         "Sixes": 0,
         "StrikeRate": 0,
         "wktDetails": "Caught"
      }
   ],
   "FirstBattingDetailsBallByBall": [],
   "FirstBowling": [],
   "FirstBowlingDetailsOverbyOver": [],
   "FirstInningsSummary": {},
   "MatchSummary": {},
   "SecondBatting": [],
   "SecondBattingDetailsBallByBall": [],
   "SecondBowlinDetailsgOverbyOver": [],
   "SecondBowling": [],
   "SecondInningsSummary": {}
}

Answer 1

非常感谢 Suraj，它工作正常 :)

<ion-list *ngIf="resultScoreCard" >
      <ion-item-divider >First Batting  </ion-item-divider>
      <ion-item *ngFor="let item of resultScoreCard.FirstBatting; let i = index">
          <p><b>{{item.ShortName}}</b></p>
      </ion-item>
</ion-list>

Answer 2

您的记分卡是一个对象，而 scorecard.FirstBatting 是数组，

<ion-list *ngIf="resultScoreCard">
  <ion-item *ngFor="let item of resultScoreCard.FirstBatting; let i = index">
       <p><b>Match Palyed: {{item.Name}}</b> </p>        
  </ion-item>
</ion-list>