在IONIC2/Angular2中如何循环遍历两个数组？使用*ngFor。

Question

我已经将值存储在两个数组中，以便在单个ion-list中进行迭代。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拆分它？

- Kartiikeya

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

- Thierry Templier

---

我还没有尝试过你的答案。我正在尝试将两个值保存在对象数组中，以便我可以根据obj.name和obj.status进行访问。 - Kartiikeya

我会尝试你的方法，因为它在典型情况下似乎很有用。@tThierry - Kartiikeya

使用这种方法，如果数组中的任何一个元素发生变化，模板是否会自动更新？ - filippo

我认为这应该是被接受的答案，而且在我看来，这是最“Angular”的方法。 - don

Answer 2

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

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

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

</ion-list>

- Maximilian Riegler

---

另一个数组的计数与第一个相同吗？这两个数组相关联吗？ - Maximilian Riegler

如果它们没有关联，为什么你想要将两个数组的数据并排显示呢？ - Maximilian Riegler

考虑相关问题，如何将“karthik”+“ONLINE”值拆分为两个不同的HTML元素。 - Kartiikeya

好的，我没有看到任何问题。这应该可以直接使用。 - Maximilian Riegler

不确定你在这里想要实现什么。你想展示一个账单人的状态和名字，而这些数据来自两个不同的来源？你需要构建一个{name: name, status: status}的数组，并对它们进行迭代。 - Derek Kite

Answer 3

为什么不这样做？

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

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

</ion-list>

请不要在代码中创建单个 数组：

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

- sebaferreras

Answer 4

我采用了这种方法。。将值存储在单个数组中，而不是像来自单个源的两个数组。

 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>

它对我起作用了。

- Kartiikeya

Answer 5

我正在使用单个数组中的多个数组

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

如何在HTML中使用*ngfor调用？

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

- sasi