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

所以当用户按下save时会上传图像，然后它会调用我的用户服务上的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如何在提供者中声明？

为了检查这个

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

您必须具有相同的权限才能使此流程像您一样工作正在描述它。如果您在所有组件中都有一个实例，那么您可以创建一个plunker或提供对组件的完整实现的访问权。

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 +＆＃34; / api / services / app / Profile / GetProfilePicture＆＃34 ;; url_ = url_.replace（/ [？＆amp;] $ /，＆＃34;＆＃34;）;

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

这是一个黑客，但应该工作。更改图片后，在超时内调用该函数。这将欺骗Angular重新加载视图。

save(row) {
    if (row.comment === "") {
      alert('Please enter a comment');
    } else {
      row.isEditable = false
    }
  }

配置文件图片不会更新组件Angular 5

4 个答案: