(이오닉 2/각도 Js 2) 배열의 루프 내부 인덱스에 액세스

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 파일입니다 : 내가 loadKuliner에 kuliners 올바르게 액세스 할 수 있습니다() 메소드를 루프 내부의 경고를 사용할 때

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

마지막으로 이상한 일입니다. 그러나 경고를 제거하면 kuliners가 다시 잘못됩니다 (임의로).

편집 : kuliners의 항목은 다음과 같이이다 : 조언을 sebaferreras에 대한

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

감사합니다. 문제는 단일 인스턴스 클래스를 만들 때 해결됩니다.

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

}