配置文件图片不会更新组件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();只是因为它导致了一个问题,比如它在关闭之前调整服务但是没有改变任何东西

编辑

当我使用chrome调试器时,我在所有函数和服务调用上都设置了断点..当我按下save时,userService函数会触发一个断点..但是之后没有其他函数被调用我不知道为什么？

第二次编辑 我跟随Abylay Kurakbayev回答并改变了

 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

据我所知，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.

您必须具有相同的距离才能使此流程按照您所描述的方式工作。如果您有一个跨所有组件的实例，您可以创建一个 plunker 或提供对组件的完整实现的某种访问权限。