Question

我在Angular应用中显示了一些用户列表，这些用户存储在usersList.users数组中。我添加了一个用于编辑每个用户的模式窗口，编辑工作和数据保存在数据库中，但是在模式窗口关闭后，用户列表消失了，列表中仅可见被编辑的用户。

模态窗口代码

    this.usersService.editUser(this.userId)
      .pipe(
        finalize(() => {
          this.isVisible = false;
          this.isOkLoading = false;
        })
      )
      .subscribe(
        data => {
          this.usersList.users = [data];
        },
        error => {
          this.message.create('error', 'Could not update user');
        }
      );

userList模型，用于在页面中显示用户：

    users: User[]; //users per page
    count: number; //total count of users in database
    hasMore: boolean; //true if there are any users in next page

问题是，在我保存编辑后的用户并按“确定”后，模式窗口关闭，并且列表中只有编辑后的用户。如何只更新列表中已编辑的用户数据，并同时将所有以前的用户也包含在列表中？

Answer 1

您正在subscribe()方法中设置用户列表：

.subscribe(
    data => {
      this.usersList.users = [data]; // here you are updating your user list
    },
    error => {
      this.message.create('error', 'Could not update user');
    }
  );

因此您可以注释以下行：

this.usersList.users = [data]; // here you are updating your user list

或再次进行AJAX调用以获取所有用户。

此外，在RXJS中，您只能使用pipe方法，而不能使用subscribe：

this.usersService.editUser(this.userId)
  .pipe(
    map((res) => {
      this.isVisible = false;
      this.isOkLoading = false;
      // this.usersList.users = res.json();
    })
  )

pipe()用于链接可观察的运算符，而subscribe()方法用于启用可观察的值并侦听可观察的发射值。

Answer 2

在您的subscribe块中，您要使用仅包含数组中更新的this.usersList.users对象的数组来重置user数组。

您似乎正在获得更新的用户，作为editUser呼叫的响应。如果确实如此，那么您首先需要找到具有该userId的用户的索引，然后将更新后的用户放在该索引处。

类似这样的东西：

this.usersService.editUser(this.userId)
  .pipe(
    finalize(() => {
      this.isVisible = false;
      this.isOkLoading = false;
    })
  )
  .subscribe(
    data => {
      const indexOfUpdatedUser = this.usersList.users.findIndex(user => user.id === this.userId);
      this.usersList.users[indexOfUpdatedUser] = data;
    },
    error => {
      this.message.create('error', 'Could not update user');
    }
  );

PS：我假设this.usersList.users数组中的每个对象都具有一个id属性。

仅更新数据已更改的数组中的对象

2 个答案: