2016-08-25 7 views
1

配列内でループする問題があります。 この私のHTMLコードは:(Ionic 2/Angular Js 2)配列内の配列内のインデックスへのアクセス

<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]が変数です。それぞれはキュリナーの中で間違ったアクセスのように思えますし、毎回私はキュリナーを爽やかにしています。それはランダムアクセスのようなものです。私は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); 
      }) 
     } 
    } 
} 

最後の奇妙なことがあります。しかし、私が警告を取り除くと、キュリナーは(ランダムのように)再び間違ったものになります。

編集:アドバイス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"} 
+0

あなたはOPに追加してもらえ 'kuliners'配列の各項目がどのように見えますか? – sebaferreras

+0

私は種類フードのデザート(インデックス0)とメインコース(インデックス1)を持っています。デザートの食品(Kuliners)はチョコレートとアイスクリームです。メインコースの料理(kuliners)はサーロインステーキとピザです。私がデータを表示すると、インデックス0にキリナーがチョコレートとアイスクリームとなり、時にはサーロインステーキとピザになることがあります。私はデバッグを試み、サービス(PHPファイル)を試してみて、データが正しいと思われます。たぶん配列にプッシュするときの問題?または、配列をロードするときは? – Sky

+0

各オブジェクトのすべてのプロパティを1つのインスタンス内にラップするモデルを作成するとどうなりますか?したがって、配列を分割する代わりに、そのインスタンスのid、name、およびkulinersを持つインスタンスを** **のみ作成できますか?あなたがしたい場合は、私はそれを行う方法についての答えを書くことができます。 – sebaferreras

答えて

1

ありがとう:kulinersの項目は、このようなものです。問題は、私がシングルインスタンスクラスを作成しているときに解決されます。

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

}

+0

これを聞いてうれしいです...あなたのコードは今読みやすく、将来も維持しやすくなります:) – sebaferreras

関連する問題