web-dev-qa-db-ja.com

* ngFor-- IONIC2 / Angular2で2つの配列を繰り返す

2つの配列に値を格納して、1つのイオンリストで繰り返し処理しています。 BillerstatusstateとBillerstatusnamelstは2つの配列です。

私は次のことを繰り返し試しました

<ion-list ion-item *ngFor="let stat of Billerstatusstate;let bil of Billerstatusnamelst "  >

  {{bil}} <button round>{{stat}}</button>

</ion-list>

そして

<ion-list ion-item *ngFor="let stat of Billerstatusstate" *ngFor="let bil of Billerstatusnamelst "  >

  {{bil}} <button round>{{stat}}</button>

</ion-list>

両方のローカル変数の最初の反復値を取ります。

何か足りないものはありますか？

両方の値を単一の配列に格納し、ngForを使用してビュー側で分割する他の方法はありますか？.

angulartypescriptionic2ionic3
7
Kartiikeya

私はこのアプローチに従いました。単一のソースから取得するため、値を2つの配列ではなく1つの配列に格納しました。

 this.Billerstatusnamelst.Push({name:"testname",Status:"Failure"});

HTML部分

 <ion-list ion-item *ngFor="let bil of Billerstatusnamelst "  >

  {{bil.name}} <button round>{{bil.Status}}</button>

</ion-list>

それは私のために働いた。

2
Kartiikeya

2つの配列を1つに「マージ」するパイプを作成し、この新しい配列を反復処理できます。

ここにサンプルがあります：

@Pipe({
  name: 'merge'
})
export class MergePipe {
  transform(arr1, arr2) {
    var arr = [];
    arr1.forEach((elt, i) => {
      arr.Push({ state: elt, name: arr2[i] });
    });
  }
}

次のように使用します。

<ion-list ion-item *ngFor="let elt of Billerstatusstate | merge:Billerstatusnamelst"  >
  {{elt.name}} <button round>{{elt.state}}</button>
</ion-list>
9
Thierry Templier

なぜこれをする代わりに

<ion-list ion-item *ngFor="let stat of Billerstatusstate;let bil of Billerstatusnamelst "  >

  {{bil}} <button round>{{stat}}</button>

</ion-list>

コードに単一のarrayを作成しないでください：

// I'm assuming they both have the same size
for (var _i = 0; _i < Billerstatusstate.length; _i++) {
    this.singleArray.Push({
                         stat: this.Billerstatusstate[_i],
                         bil: this.Billerstatusnamelst[_i] 
                        });
}

そしてあなたのページで：

<ion-list ion-item *ngFor="let item of singleArray;"  >

  {{item.bil}} <button round>{{item.stat}}</button>

</ion-list>
6
sebaferreras

これを実現するには、ngForディレクティブのインデックスを活用できます。

<ion-list ion-item *ngFor="let stat of Billerstatusstate; let i=index">

  {{Billerstatusnamelst[i]}} <button round>{{stat}}</button>

</ion-list>
5
rinukkusu

単一アレイ内の複数のアレイを使用しています

    this.termlist = this.result.termlst.$values;
    this.disableterm = this.result.disableterms.$values;
    this.customlist = this.result.customgrplist.$values;

単一配列コード

 this.totalarrayob =[ this.termlist,this.disableterm, this.customlist];

* ngforを使用してHTMLで呼び出す方法

<ion-col col-12 no-padding *ngFor="let list of totalarrayob;let k = index">
    <h6>lorem Ipsum</h6>
    <ion-list>
      <ion-item>
        <ion-label>I Term</ion-label>
        <ion-checkbox checked="false"></ion-checkbox>
        <ion-note item-right>
          25000
        </ion-note>
      </ion-item>
    </ion-list>
  </ion-col>
0
sasi