Угловой rxjs BehaviorSubject.value устанавливает значение без next (), не является неизменным - PullRequest
0 голосов
/ 26 июня 2018

Пока я тестировал свой код, я случайно столкнулся с неожиданной мутацией .... Или, может быть ... Я просто делаю все неправильно ...

Пользователь

constructor(
public id: number,
public education: Education[]

){}

UserStateService

private user = new BehaviorSubject<User>(null);

setUser(user:User){
  // set by HttpClient or perform an update
  this.user.next(user);
}

getUserDetail(){
  return this.user.value; 
       // this.user.getValue();  => tried this as well same thing...
}

updateUserDetail(user:User){
  // Maybe perform some check method before the update
  this.user.next(user);
  // HttpClient to save on db
}

В моем компоненте есть форма, в которой пользователь будет изменять свои данные. Поэтому моя идея заключается в том, чтобы вызвать getUserDetail(), думая, что возвращаемый объект должен быть только для чтения. Как только я установил новое значение, я бы updateUserDetail() обновил наблюдаемое с next(), но я испытал иначе ...

Компонент

onSubmit(){

 let currentUser = this.userService.getUserDetail();

 console.log("Original User => ", currentUser);  // array(2) see screen shot highlighted

 currentUser.educations = this.userForm.value['educations'];

 console.log("Modify User => ", currentUser); // array(1)

 // this.userService.updateUserDetail(currentUser); 

}

enter image description here

currentUser.educations = this.userForm.value['educations']; Я не хочу, чтобы это автоматически обновляло наблюдаемое, потому что в некоторых случаях мне может понадобиться проверить информацию, прежде чем вносить изменения ... как я могу этого достичь?

Спасибо

1 Ответ

0 голосов
/ 27 августа 2018

Я не уверен, что это правильный путь ... Если вы считаете, что это решение является плохой практикой, пожалуйста, сформулируйте проблему, а также предоставьте решение.Я рад изменить помеченный ответ.

Но я так и сделал.

У меня, по сути, есть еще одна переменная, которая действует как связь с моими подданными.Это создало многочисленные преимущества, такие как проверка данных до того, как .next () наблюдаемый.

Вот как выглядит код

private userSubject = new BehaviorSubject<User>(null);
user$ = this.userSubject.asObservable(); // -> prevent .next() be called on the component 
private user: User = null;

setUser(user:User){
  this.user = user
  // if(user) -> so some check if you desire
  this.userSubject.next({...this.user}); // use spread syntax to make a copy so it does not directly refere to this.user
}

// -> Don't need this any more. Just subscribe to user$
// getUserDetail(){
//  return this.user.value; 
       // this.user.getValue();  => tried this as well same thing...
//}

Следующее решение было вдохновлено этой статьей https://codeburst.io/javascript-es6-the-spread-syntax-f5c35525f754

Ссылка на документ для синтаксиса распространения https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...