Itérer les deux tableaux *ngFor— IONIC2/Angular2

J'ai des valeurs stockées dans deux tableaux pour effectuer une itération dans un seul ion-liste . Billerstatusstate et Billerstatusnamelst sont les deux tableaux.

J'ai essayé ce qui suit pour effectuer une itération

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

Sa première itération de la valeur pour la variable locale.

Il y a une chose qui me manque ??

est-il autre façon de stocker les valeurs dans le tableau unique et le couper en Vue de côté en utilisant ngFor..

OriginalL'auteur Kartiikeya | 2016-06-29

8

J'ai pu créer un canal de "fusionner" deux tableaux en un seul et ensuite vous pouvez parcourir ce nouveau tableau.

Voici un exemple:
```
@Pipe({
  name: 'merge'
})
export class MergePipe {
  transform(arr1, arr2) {
    var arr = [];
    arr1.forEach((elt, i) => {
      arr.push({ state: elt, name: arr2[i] });
    });
  }
}
```
Et de l'utiliser de cette façon:
```
<ion-list ion-item *ngFor="let elt of Billerstatusstate | merge:Billerstatusnamelst"  >
  {{elt.name}} <button round>{{elt.state}}</button>
</ion-list>    
```
Je n'ai pas encore essayer ur réponse. Je m en essayant de sauver deux valeurs dans la matrice de la forme de l'Objet .afin que je puisse l'accès en fonction de l'obj.nom,obj.statut.
Je vais essayer votre méthode semble être utile dans des scénarios typiques. @tThierry
en utilisant cette approche, le modèle sera mis à jour automatiquement si l'une de la matrice de changements?
Cette OMI doivent être acceptés réponse, et il me semble le plus "angulaire" de le faire.

OriginalL'auteur Thierry Templier

Pourquoi au lieu de faire cette

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

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

</ion-list>

ne pas vous créer un seul array dans votre code:

//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] 
                        });
}

Et puis dans votre page:

<ion-list ion-item *ngFor="let item of singleArray;"  >

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

</ion-list>

OriginalL'auteur sebaferreras

3

Vous pouvez tirer parti de l'index de la ngFor directive pour atteindre cet objectif.
```
<ion-list ion-item *ngFor="let stat of Billerstatusstate; let i=index">

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

</ion-list>
```
Au lieu de l'index, j'ai l'itération à une autre matrice.
L'autre tableau ont le même chef d'accusation que le premier? Et qui sont ces tableaux sont-ils liés?
Les deux tableaux ont des noms d'état/msgs ..Pas liées à l'index et de chiffres.
Si ils ne sont pas liés, pourquoi sur la terre que vous souhaitez afficher des données à partir de deux tableaux côte à côte?
Pas sûr de ce que vous essayez d'accomplir ici. Vous voulez afficher l'état d'un émetteur de factures et de leur nom, et les données proviennent de deux sources différentes? Vous devez venir avec une gamme de {nom: nom,statut:statut} et itérer à travers eux.

OriginalL'auteur rinukkusu
2

J'ai suivi cette approche..
J'ai des valeurs stockées dans le tableau unique au lieu de deux tableaux comme il s'agit d'une source unique.
```
 this.Billerstatusnamelst.push({name:"testname",Status:"Failure"});
```
Dans la partie HTML
```
 <ion-list ion-item *ngFor="let bil of Billerstatusnamelst "  >

  {{bil.name}} <button round>{{bil.Status}}</button>

</ion-list>
```
Sa a fonctionné pour moi..

OriginalL'auteur Kartiikeya

Plusieurs de tableau en tableau unique le matin à l'aide

    this.termlist = this.result.termlst.$values;
    this.disableterm = this.result.disableterms.$values;
    this.customlist = this.result.customgrplist.$values;

tableau unique code

 this.totalarrayob =[ this.termlist,this.disableterm, this.customlist];

comment puis-je appeler en html à l'aide de *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>

OriginalL'auteur sasi

Vous devez vous connecter pour publier un commentaire.