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

【问题标题】：Iterate two arrays in *ngFor-- IONIC2/Angular2在 *ngFor-- IONIC2/Angular2 中迭代两个数组
【发布时间】：2016-11-01 05:47:18
【问题描述】：

我已将值存储在两个数组中以在单个 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 将其拆分到 View 端。

【问题讨论】：

标签： angular typescript ionic2 ionic3

【解决方案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>

【讨论】：

我还没有尝试你的答案。我正在尝试以 Object 的形式将两个值保存在数组中，以便我可以根据 obj.name,obj.status 进行访问。
我会尝试您的方法，因为它似乎在典型场景中很有用。 @tThierry
使用这种方法，如果其中一个数组发生变化，模板会自动更新吗？
这个 IMO 应该是公认的答案，在我看来这是最“有角度”的方法。

【解决方案2】：

为什么不这样做

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

【讨论】：

我必须迭代另一个数组，而不是索引。
另一个数组的计数是否与第一个相同？这些数组是否相关？
两个数组都有名称/状态消息..与索引/数字无关。
如果它们不相关，你到底为什么要并排显示两个数组中的数据？
不确定您要在这里完成什么。您想显示帐单的状态及其姓名，而数据来自两个不同的来源？您需要提出一个 {name: name,status:status} 数组并遍历它们。

【解决方案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>

它对我有用..

【讨论】：

【解决方案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];

如何使用 *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>

【讨论】：