时间戳

首页 > 解决方案 > 配置文件图片未跨组件更新Angular 5

javascript - 配置文件图片未跨组件更新Angular 5

问题描述

我有一个弹出的更改个人资料图片模式，因此您上传图片按保存，应该发生的是个人资料图片在整个网站上更新但不会发生，只有在您刷新个人资料图片更新后

我在个人资料图片更改模式上的保存功能

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 调试器时，我在所有函数和服务调用上都设置了断点。当我按下保存时，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()函数所在的组件？因为一刷新页面，头像就会更新？？

谢谢

标签： javascriptangulartypescriptangular5

解决方案

更改此代码：

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_);
});

}

并查看控制台中是否有任何关于此的内容。我已将我添加到代码中的内容标记为//----

推荐阅读