首页 文章

在* ngFor- IONIC2 / Angular2中迭代两个数组

提问于
浏览 次
4

我已将值存储在两个数组中以在单个离子列表中进行迭代 . Billerstatusstate和Billerstatusnamelst是两个阵列 .

我尝试了以下迭代

<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将其拆分到View端 .

angular typescript ionic2 ionic3

5 回答

  • 0

    我可以创建一个管道来将你的两个数组“合并”成一个数组然后你可以迭代这个新的数组 .

    这是一个示例：

    @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>
    回复于
  • 8

    为什么不这样做呢？

    <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>
    回复于
  • 3

    您可以利用 ngFor 指令的索引来实现此目的 .

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

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

</ion-list>
    回复于
  • 2

    我已经遵循了这种方法..我将值存储在单个数组中而不是两个数组，因为它来自单个源 .

    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>

    它为我工作..

    回复于
  • 6

    使用单个数组中的多个数组

    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>
    回复于

相关问题