* ngFor gerenderte Reihenfolge ist nach einem HTTP/JSONP-Aufruf unzuverlässig?

Question

Ich mache einen JSONP-Aufruf mit Informationen aus einem Array von "Schlüsseln", die in einer bestimmten Reihenfolge sind. Ich möchte, dass das resultierende neue Array die gleiche Reihenfolge wie das Quell-Array von Schlüsseln hat. Dies geschieht manchmal, aber nicht immer.

Ich habe versucht forEach, for-Schleife, ein einfaches Array mit nur die Schlüsselwerte und ein Array mit dem Feld "Name", gefolgt von dem Schlüsselwert. Keine Ahnung, warum ich keine einheitliche Bestellung bekommen kann. Das Folgende ist mit einem einfachen Array und nur Schlüsselwerten.

/*separate defining class*/ 
export class ArrayObjectItem { 
    city: string; 

constructor(city: string) { 

this.city = city; 
} 

    } 
    /**/ 

    /*Below follows the code inside the main bootstrapped/rendering component*/ 

names: [] = ['name1', 'name2', 'name3', 'name4', 'name5']; 
arraytorender: Array<ArrayObjectItem>[] = []; 

this.names.forEach(name => { 
    this.aJSONPservice.getData(name).subscribe(response => { 
    const objectinarray = new ArrayObjectItem("null"); 
    objectinarray.city = response.city; 
this.arraytorender.push(objectinarray); 

}); 
}); 

Nach Ansicht der Hauptkomponente:

<div *ngFor="#item of arraytorender"> 
{{item.city}} 
</div> 

Answer 1

*ngFor das Richtige tut. Das Array ist einfach nicht sortiert.
Wenn Sie es sortieren Sie das gewünschte Ergebnis erhalten:

ngOnInit():any { 
    this.names.forEach(name => { 
     this._cityService.getCity().subscribe(response => { 
     const objectinarray = new ArrayObjectItem("null", "null"); 
     objectinarray.city = response.city; 
     objectinarray.namefromkeys = name; 
     this.arraytorender.push(objectinarray); 
     this.arraytorender.sort((a,b) => { 
      if(a.namefromkeys == b.namefromkeys) { 
      return 0; 
      } 
      if(a.namefromkeys > b.namefromkeys) { 
      return 1; 
      } 
      return -1; 
     }); 
     }); 
    }) 
    } 

Answer 2

Sie haben Array nach jedem Stoß zu sortieren, da Antworten in zufälliger Reihenfolge kommen:

this.arraytorender.push(objectinarray); 
this.arraytorender.sort((a,b)=>{ 
    if (a.city < b.city) 
    return -1; 
    else if (a.city > b.city) 
    return 1; 
else 
    return 0; 
}); 

Möglicherweise müssen Sie ändern Trigger erzwingen:

this.arraytorender = this.arraytorender.concat();