Question

我使用＆＃34;键＆＃34;数组中的信息进行JSONP调用，这些信息按特定顺序排列。我希望得到的新数组与键的源数组的顺序相同。有时会发生这种情况，但并非总是如此。

我尝试过forEach，for循环，一个只包含键值的简单数组，以及一个带字段＆＃34; name＆＃34;的数组。其次是关键值。不知道为什么我不能得到一致的订单。以下是一个简单的数组和关键值。

 /*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);

 });
 });

在主要组成部分的视图中：

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

Answer 1

*ngFor做对了。数组没有排序。
如果您对它进行排序，您将获得所需的结果：

  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

每次推送后都必须对数组进行排序，因为响应按随机顺序排列：

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

您可能需要强制更改触发器：

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

* HTTP / JSONP调用后，ngFor的呈现顺序是不可靠的？

2 个答案: