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

前端之家收集整理的这篇文章主要介绍了在* ngFor- IONIC2/Angular2中迭代两个数组前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我已将值存储在两个数组中,以便在单个离子列表中进行迭代. Billerstatusstate和Billerstatusnamelst是两个阵列.

我尝试了以下迭代

  1. <ion-list ion-item *ngFor="let stat of Billerstatusstate;let bil of Billerstatusnamelst " >
  2.  
  3. {{bil}} <button round>{{stat}}</button>
  4.  
  5. </ion-list>

  1. <ion-list ion-item *ngFor="let stat of Billerstatusstate" *ngFor="let bil of Billerstatusnamelst " >
  2.  
  3. {{bil}} <button round>{{stat}}</button>
  4.  
  5. </ion-list>

它取两个局部变量的第一个迭代值.

我错过了什么?

有没有其他方法可以将两个值存储在单个数组中,并使用ngFor在View端拆分它.

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

这是一个示例:

  1. @Pipe({
  2. name: 'merge'
  3. })
  4. export class MergePipe {
  5. transform(arr1,arr2) {
  6. var arr = [];
  7. arr1.forEach((elt,i) => {
  8. arr.push({ state: elt,name: arr2[i] });
  9. });
  10. }
  11. }

并以这种方式使用它:

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

猜你在找的Angularjs相关文章