为什么在Angular中* ngFor首先从Ionic 3中具有.subscribe（）方法的对象数组中显示新对象

我是Ionic 3＆Angular的新手，遇到了* ngFor和.subscribe（）方法的问题 . 如果这是一个简单的问题，请原谅我 . 我试图找出http.get（..） . map（..）的行为 . subscribe() 函数与* ngFor一起使用时维护一个对象数组并使用* ngFor在.html模板文件中向用户显示记录，但无法知道 *ngFor 的奇怪行为 .

在我的Ionic 3应用程序中，我使用API获取数据并将其存储在名为 "users" 的组件变量中，该组件变量在组件.ts文件中声明如下 -

users: Array<any>;

我有下面的组件功能，它给我这个用户数组的数据 -

addUser(count: number) {
  this.http.get('https://randomuser.me/api/?results=' + count)
  .map(data => data.json().results)
  .subscribe(result => {
    for (let val of result) {
      this.users.push(val);
    }
  })
}

最初，我使用上面的组件函数从API获取10个用户的数据，只需在我的ngAfterViewInit（）函数中调用它，如 -

this.addUser(10);

这给了我在 users 数组中的10个用户记录对象，我在视图.html文件中使用类似下面的内容向用户显示 -

<ion-card *ngFor="let user of users">
  {{user.email}}
</ion-card>

此时* ngFor将最后一个数组元素放在视图中，并按降序显示记录，作为从索引9到0的数组中的元素 . （LIFO顺序）

现在我开始使用 users.pop(); 从这个用户数组中弹出最后一个元素，并在索引0处开始推送另一个元素，方法是使用 users.unshift(..) 在下面的函数中移动当前元素并将其称为 addNewUser(1); -

addNewUser(count: number) {
      this.http.get('https://randomuser.me/api/?results=' + count)
      .map(data => data.json().results)
      .subscribe(result => {
        for (let val of result) {
          this.users.unshift(val);
        }
      })
    }

此时，如果我们考虑具有10个元素的第一个数组，则删除索引9处的最后一个对象，并添加索引0处的另一个元素，使索引0-8上的前一个元素转移到索引1-9 .

在这样做的时候，我的视图得到了更新，其中有* ngFor，令人惊讶的是这次它显示了第一个位置的第一个元素，它实际上是索引0，这是我最近放的那个 . 这与先前的顺序相反，后面是* ngFor以在屏幕上呈现元素 .

为什么* IFor在Ionic 3视图中首先从对象数组中显示最近插入的对象元素，这些对象元素依赖于subscribe方法.subscribe（）方法 . 我真的很困惑 .

我真的需要清除* ngFor和subscribe（）的概念 . 请帮我 .

注意：上面提到的API可公开访问以进行测试，如果需要，您可以调用它来检查响应结构 . 在调用 https://randomuser.me/api/?results=1 时粘贴下面的示例API响应 -

{
    "results": [
        {
            "gender": "male",
            "name": {
                "title": "mr",
                "first": "daniel",
                "last": "stoll"
            },
            "location": {
                "street": "9719 tannenweg",
                "city": "cottbus/chosebuz",
                "state": "bremen",
                "postcode": 81443
            },
            "email": "daniel.stoll@example.com",
            "login": {
                "username": "greenleopard994",
                "password": "chat",
                "salt": "OUjisBdQ",
                "md5": "8148d51998f3fef835a5f3979218c181",
                "sha1": "131ae09d045b345efe36a330bf17a450b76f7de3",
                "sha256": "94c3a362b5f516d0fb1d4e9dbb632d32d57b8886d5cc7bf0d5cedc99e7d55219"
            },
            "dob": "1957-04-26 22:07:14",
            "registered": "2002-04-29 10:57:34",
            "phone": "0556-4348870",
            "cell": "0172-5116200",
            "id": {
                "name": "",
                "value": null
            },
            "picture": {
                "large": "https://randomuser.me/api/portraits/men/14.jpg",
                "medium": "https://randomuser.me/api/portraits/med/men/14.jpg",
                "thumbnail": "https://randomuser.me/api/portraits/thumb/men/14.jpg"
            },
            "nat": "DE"
        }
    ],
    "info": {
        "seed": "8fd4afe85884c767",
        "results": 1,
        "page": 1,
        "version": "1.1"
    }
}

请参阅this example显示我的问题 .