Question

我在数组内循环的数组有问题。这是我的HTML代码：

<ion-content padding class="kuliner-index">
  <ion-list *ngFor="let jen of jenis; let i = index">
    <ion-list-header>{{jenisNama[i]}} </ion-list-header>
    <ion-item  *ngFor="let kuliner of kuliners[i]">
        <img src="{{kuliner.main_img}}" style="width:50px;height:50px;margin:auto" >
        {{kuliner.nama}}<br/>
        <ion-icon name="md-star"></ion-icon> {{kuliner.rating}} / 5.00
    </ion-item>
    <br/><br/>
  </ion-list>
</ion-content>

问题在于kuliners [i]变量。每个人在kuliners内部看起来都是错误的访问，每次我都在刷新kuliners [i]。这就像是随机访问。我想要jenis [0]，访问的kuliners是kuliners [0]。

这是我的ts档案：

import {Page, NavController} from 'ionic-angular';
import {KulinerService} from '../../providers/kuliner-service/kuliner-service';
@Page({
  templateUrl: 'build/pages/kuliner-index/kuliner-index.html',
  providers: [KulinerService]
})
export class KulinerIndexPage {
  public jenis : Number[] =null;
  public jenisNama : String[] = null;
  public jenisShow : boolean[] = null;
  public kuliners: Array<any> = null;
  private timer ;
  constructor(public nav: NavController, public kulinerService : KulinerService) {
    this.jenis = [1,2,3,4];
    this.jenisNama = ['Appetizer (Hidangan Pembuka)','Main Course (Hidangan Utama)','Dessert (Hidangan Penutup)','Minuman Spesial'];
    this.kuliners = new Array<any>();
    this.jenisShow = new Array<boolean>();
    this.loadKuliner();
  }

  loadKuliner()
  {
      for(var i=0;i<this.jenis.length ; i++)
      {
        alert(this.jenisNama[i]);
          this.kulinerService.loadKulinerByJenis(this.jenis[i])
            .then(dataResto => {
                this.kuliners.splice(i, 0, dataResto);
                this.jenisShow.push(false);
          })
      }   
  }
}

最后一件奇怪的事情是当我在loadKuliner（）方法中使用循环内部的警报时，正确访问了kuliners。但如果我删除警报，那么kuliners会再次出错（就像随机一样）。

编辑：kuliners中的项目是这样的：

[{"item_ID":"10009","nama":"Brownie Bite","main_img":"img\/Food\/Desserts_Brownie_Bite.jpg","harga":"40000","deskripsi":"Yummie...","points":"4","favorit":"2","rating":"4.25","rater":"1","tgl_post":"2016-01-15 00:00:00"}

Answer 1

感谢sebaferreras的建议。当我创建单实例类时，问题就解决了。

 export class KulinerIndex
  {
  private jenis : Number;
  private nama : String;
  private isShow : boolean;
  private kuliners : any;

  constructor(public isiJenis : Number, public isiNama : String, public kulinerService : KulinerService)
  {
      this.setJenis(isiJenis);
      this.setNama(isiNama);
      this.setIsShow(false);
      this.loadKuliner();
  }

  loadKuliner()
  {
        this.kulinerService.loadKulinerByJenis(this.getJenis())
          .then(dataResto => {
              this.kuliners = dataResto;
        })
  }

  public getIsShow()
  {
    return this.isShow;
  }

  public setIsShow(isShow)
  {
    this.isShow = isShow
  }

  public getNama()
  {
      return this.nama;
  }

  public setNama(nama : String)
  {
      this.nama = nama
  }

  public getJenis()
  {
      return this.jenis;
  }

  public setJenis(jenis : Number)
  {
      this.jenis = jenis;
  }

  public getKuliners()
  {
      return this.kuliners;
  }

}

（Ionic 2 / Angular Js 2）访问数组内部数组中的索引

1 个答案: