Обновить только объект из массива, данные которого были изменены

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 вы сбрасываете массив 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.

Answer 2

Вы устанавливаете в 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() используется для включения наблюдаемых и прослушивания излучаемых значений с помощью наблюдаемых.