Изображение профиля не обновляется во всех компонентах Angular 5

Question

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

моя функция сохранения при изменении профиля изображения в модале

save(): void {
    const self = this;
    this.saving = true;
    self._profileService.updateProfilePicture(input)
        .finally(() => { this.saving = false; })
        .subscribe(() => {
            const self = this;
            self._$jcropApi.destroy();
            self._$jcropApi = null;
            abp.event.trigger('profilePictureChanged');
            console.log('changed');
            this._userService.updateProfilePicture();
            self.close();
        });
}

поэтому, когда пользователь нажимает сохранить, он загружает изображение, а затем вызывает функцию updateProfilePicture в моей пользовательской службе ...

мой пользовательский сервис настроен так ...

 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { Subject } from 'rxjs/subject';


 @Injectable()
 export class UserService {
      private profilePictureSource = new Subject<any>();

      profilePicture = this.profilePictureSource.asObservable();

      updateProfilePicture() {
          this.profilePictureSource.next();
      }
 }

затем в компоненте я хочу, чтобы изображение профиля изменилось

 import { UserService } from '/userService'; 
 import { ProfileService } from '/profileService';

 export class ....

 profilePicture: any;

 constructor(
     private _userService: UserService,
     private _profileService: ProfileService
 ) { }

 ngOnInit() {
    // grab the profile picture on init
    this.userPic();
    // Listen for profile picture change
    this._userService.profilePicture.subscribe(result => { 
      this.userPic(); 
    } 
 }

userPic() {
  this._profileService.getProfilePicture().subscribe(result => {
    if (result && result.profilePicture) {
      this.profilePicture = 'data:image/jpeg;base64,' + result.profilePicture;
    }
  });
}

тогда в моем HTML

<img [src]="profilePicture" />

Я пытался закомментировать self.close(); только в том случае, если это вызывало проблему, как будто она закрывалась до того, как было получено изменение для вызова службы, но это ничего не изменило

EDIT

Когда я использую отладчик Chrome, я ставлю точки останова на все функции и вызов службы ... когда я нажимаю сохранить, функция userService вызывает точку останова ... но после этого никакие другие функции в стеке не вызываются. Я не знаю почему?

2-е РЕДАКТИРОВАНИЕ Я последовал за ответом Абылая Куракбаева и изменил

 profilePicture = this.profilePictureSource.asObservable(); //from
 profilePicture = this.profilePictureSource; //to

но это не решило проблему

РЕДАКТИРОВАТЬ 3

вот функция getProfilePicture ()

getProfilePicture(): Observable<GetProfilePictureOutput> {
    let url_ = this.baseUrl + "/api/services/app/Profile/GetProfilePicture";
    url_ = url_.replace(/[?&]$/, "");

    let options_ : any = {
        method: "get",
        headers: new Headers({
            "Content-Type": "application/json", 
            "Accept": "application/json"
        })
    };

    return this.http.request(url_, options_).flatMap((response_ : any) => {
        return this.processGetProfilePicture(response_);
    }).catch((response_: any) => {
        if (response_ instanceof Response) {
            try {
                return this.processGetProfilePicture(response_);
            } catch (e) {
                return <Observable<GetProfilePictureOutput>><any>Observable.throw(e);
            }
        } else
            return <Observable<GetProfilePictureOutput>><any>Observable.throw(response_);
    });
}

РЕДАКТИРОВАТЬ 4 Это метод processGetProfilePicture ()

protected processGetProfilePicture(response: Response): Observable<GetProfilePictureOutput> {
    const status = response.status; 

    let _headers: any = response.headers ? response.headers.toJSON() : {};
    if (status === 200) {
        const _responseText = response.text();
        let result200: any = null;
        let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
        result200 = resultData200 ? GetProfilePictureOutput.fromJS(resultData200) : new GetProfilePictureOutput();
        return Observable.of(result200);
    } else if (status !== 200 && status !== 204) {
        const _responseText = response.text();
        return throwException("An unexpected server error occurred.", status, _responseText, _headers);
    }
    return Observable.of<GetProfilePictureOutput>(<any>null);
}

РЕДАКТИРОВАТЬ 5

Мне интересно, есть ли способ принудительно обновить компонент, в котором находится функция userPic() ?? Поскольку изображение профиля обновляется, как только вы обновляете страницу ??

Спасибо

Answer 1

Это взлом, но должно работать. Вызывайте функцию в течение времени ожидания после изменения изображения. Это обманет Angular, чтобы перезагрузить представление.

  setTimeout(() => {
    this.userPic();
  }, 500);

Answer 2

Эта проблема также может быть вызвана дайджестом Angular, потому что я запустил и проверил ваш код, я могу слушать profilePicture Observable каждый раз. Таким образом, каждый раз будет выполняться блок, который вызывает getProfilePicture всегда.

this._userService.profilePicture.subscribe(result => { 
      this.userPic(); 
} 

Я вижу на ngOnInit(), что вы можете получить изображение профиля, используя userPic(), но не на наблюдаемом уровне. Поэтому я сомневаюсь, что вы могли бы делать некоторые манипуляции на уровне Javascript со своими данными, о которых Angular не будет знать. Я сталкивался с этой проблемой несколько раз, поэтому я не уверен, что вы делаете что-то подобное в методе this.processGetProfilePicture(response_) или где-то еще. Пожалуйста, убедитесь.

Надеюсь, это поможет.

Answer 3

Изменить этот код:

userPic() {
  this._profileService.getProfilePicture().subscribe(result => {
    if (result && result.profilePicture) {
      this.profilePicture = 'data:image/jpeg;base64,' + result.profilePicture;
    }
  });
}

до

userPic() {
  this._profileService.getProfilePicture().subscribe(result => {
    if (result && result.profilePicture) {
      this.profilePicture = 'data:image/jpeg;base64,' + result.profilePicture;
    }
  }, (err) => console.log(error));
}

Редактировать

getProfilePicture (): Observable { let url_ = this.baseUrl + "/ api / services / app / Profile / GetProfilePicture"; url_ = url_.replace (/ [? &] $ /, "");

let options_ : any = {
    method: "get",
    headers: new Headers({
        "Content-Type": "application/json", 
        "Accept": "application/json"
    })
};

return this.http.request(url_, options_).flatMap((response_ : any) => {
    console.log(respone); // <-----
    return this.processGetProfilePicture(response_);
}).catch((response_: any) => {
console.log(response); // <-----
    if (response_ instanceof Response) {
        try {
            return this.processGetProfilePicture(response_);
        } catch (e) {
console.log(e);//<--------
            return <Observable<GetProfilePictureOutput>><any>Observable.throw(e);
        }
    } else
        return <Observable<GetProfilePictureOutput>><any>Observable.throw(response_);
});

}

И посмотрите, есть ли что-нибудь в консоли по этому поводу. Я отметил мое добавление в код как //----

Answer 4

Из чего я вижу UserService как заявлено в провайдерах?

Чтобы проверить это

1. a console.log() in the UserService constructor to see if the constructur is called multiple times
2. also check the providers from components you should have only one provider.

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