(Ionic 2/Angular Js 2) Zugriff auf den Index im Array innerhalb der Schleife des Arrays

Question

Ich habe ein Problem innerhalb des Arrays, das innerhalb des Arrays loopt. Das ist mein HTML-Code:

<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> 

Das Problem ist in kuliners [i] variabel. Jeder scheint wie falscher Zugang in Kuliners und jedes Mal, wenn ich Kuliners [i] erfrische. Es ist wie ein zufälliger Zugriff. Ich will für Jenis [0], die Kuliners, auf die zugegriffen wird, sind Kuliners [0].

Dies ist meine ts-Datei:

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); 
      }) 
     } 
    } 
} 

Die letzten seltsame Dinge ist, wenn ich die Warnung innerhalb Looping in loadKuliner() -Methode die kuliners richtig zugegriffen wird. Aber wenn ich den Alarm entferne, werden die Kuliners wieder falsch (wie zufällig).

Edit: Die Elemente in kuliners ist wie folgt:

[{"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

Vielen Dank für sebaferreras beraten. Das Problem ist gelöst, wenn ich die Einzelinstanzklasse erstelle.

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; 
    } 

}