时间戳

首页 > 解决方案 > 从服务将数据传递给我的组件后，该组件不呈现更改？

angular - 从服务将数据传递给我的组件后，该组件不呈现更改？

问题描述

我有一个包含两个数组的服务：

activeUsers: { name: string; id: number }[] = [
    { name: "Jimmy", id: 0 },
    { name: "Jaden", id: 1 },
  ];
inactiveUsers: { name: string; id: number }[] = [
    { name: "Heiji", id: 2 },
    { name: "Pheonix", id: 3 },
    { name: "Miles", id: 4 },
  ];

在不同的时间点，我将使用 push 方法更改这些数组。

this.removeUser(data.id);
if (data.status === "active") {
  this.activeUsers.push({ name: data.name, id: data.id });
} else {
  this.inactiveUsers.push({ name: data.name, id: data.id });
}

然后我在两个单独的组件中接收它们：

ngOnInit() {
    this.users = this.usersService.activeUsers;
  }

然后他们将数据渲染到屏幕上：

<li class="list-group-item" *ngFor="let user of users">
    {{ user.name }} |
    <a href="#" (click)="onSetToInactive(user.id)">Set to Inactive</a>
</li>

现在，我期望发生的是，当我使用 push 更改数组时，屏幕上的数据应该会更改。但实际上发生的是原始数据保持不变，但输出从未改变。我什至使用控制台日志来确保数组确实在变化，而且它们也相当一致，但它永远不会“到达”dom。我找到了两个“解决方案”，但对于“为什么”我需要它们都没有意义，而且由于我正在学习角度，我试图理解它为什么会发生。第一个修复是我可以将组件中的代码更改为：

ngOnInit() {
    setInterval(() => {
      this.users = this.usersService.inactiveUsers;
    }, 100);
  }

或者我可以删除 removeUser() 调用。将此代码块留在服务中：

if (data.status === "active") {
      this.activeUsers.push({ name: data.name, id: data.id });
    } else {
      this.inactiveUsers.push({ name: data.name, id: data.id });
    }

现在，这似乎是一个时间问题。要么我可以在组件中设置数据之前等待，或者我可以更快地设置数据。removeUser() 方法确实很慢——但我不明白为什么如果数据发生变化它不简单地重新渲染组件？

标签： angular

解决方案

已解决：原来我的方法是重新分配数组，所以我不得不更改为只改变它的新方法。

推荐阅读