Итерация двух массивов в * ngFor— IONIC2 / Angular2

Я сохранил значения в двух массивах для повторения в одном ионном списке. 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 ..

Ответы на вопрос(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>

а затем вы можете перебирать этот новый массив.

Вот образец:

@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>    
 Kartiikeya29 июн. 2016 г., 16:05
Я попробую ваш подход, так как он кажется полезным в типичных сценариях. @tThierry
 Kartiikeya29 июн. 2016 г., 15:54
Я еще не попробовал твой ответ. Я пытаюсь сохранить два значения в массиве в форме объекта. Так что я могу получить доступ на основе obj.name, obj.status.
 filippo03 мар. 2017 г., 18:16
При таком подходе шаблон будет автоматически обновляться, если один из массивов изменится?
 don29 сент. 2018 г., 18:22
Это IMO должно быть принятым ответом, и мне кажется, что это самый «угловой» способ сделать это.

Почему вместо этого

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

Вы можете использовать индексngFor Директива для достижения этого.

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

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

</ion-list>
 rinukkusu29 июн. 2016 г., 15:36
Ну, я не вижу никаких проблем. Это должно работать как есть.
 Derek Kite29 июн. 2016 г., 15:41
Не уверен, что вы пытаетесь достичь здесь. Вы хотите показать статус биллера и его имя, а данные поступают из двух разных источников? Вам нужно будет создать массив {name: name, status: status} и перебрать их.
 Kartiikeya29 июн. 2016 г., 15:35
рассмотрите его связанный .. как разделить значение "karthik" + "ONLINE" на два различных элемента HTML
 Kartiikeya29 июн. 2016 г., 15:31
Оба массива имеют имена / статусные сообщения. Не связаны с индексом / номерами.
 Kartiikeya29 июн. 2016 г., 15:29
Вместо индекса я должен перебрать другой массив.
 rinukkusu29 июн. 2016 г., 15:30
Другой массив имеет то же количество, что и первый? И связаны ли эти массивы?
 rinukkusu29 июн. 2016 г., 15:32
Если они не связаны, с какой стати вы хотите отображать данные из обоих массивов рядом?
Решение Вопроса

место двух массивов, как это происходит из одного источника.

 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>

Это сработало для меня ..

Ваш ответ на вопрос