javascript - Profilbild uppdateras inte över komponenter Angular 5

Jag har ett fönster för att byta profilbild som dyker upp så att du kan ladda upp bilden, trycka på spara och det som borde hända är att profilbilden uppdateras över hela webbplatsen, men det händer inte, först efter att du uppdaterar sidan har profilbilden uppdaterats.

min spara-funktion på modalen för att ändra profilbild

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

så när användaren trycker på spara laddar det upp bilden och sedan anropar det funktionen updateProfilePicture på min användartjänst...

min användartjänst är inställd så här..

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

då vill jag att profilbilden ändras i komponenten

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

då i min HTML

<img [src]="profilePicture" />

Jag försökte kommentera ut self.close(); ifall det skulle orsaka ett problem, som att det stängde innan det fick en chans att kalla tjänsten, men det förändrade ingenting

REDIGERA

När jag använder Chrome-debuggern har jag satt brytpunkter på alla funktioner och serviceanropet.. när jag trycker på spara triggas en brytpunkt i userService-funktionen.. men inga andra funktioner i stacken anropas efter det, jag är inte säker på varför?

2:a REDIGERING Jag har följt Abylay Kurakbayevas svar och ändrat

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

men det löste inte problemet

REDIGERA 3

här är funktionen 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_);
    });
}

REDIGERA 4 Detta är metoden 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);
}

REDIGERA 5

Jag undrar om det finns ett sätt att tvinga uppdatera den komponent som userPic()-funktionen är i?? Eftersom profilbilden uppdateras så fort du uppdaterar sidan??

Tack

Svar #1

Från vad jag ser UserService hur deklareras det i leverantörerna?

För att kontrollera detta

  1. en console.log() i UserService-konstruktören för att se om konstruktören kallas flera gånger
  2. also check the providers from components you should have only one provider.

Du måste ha samma instans för att detta flöde ska fungera som du beskriver det. Om du har en instans över alla komponenter, kan du göra en plunker eller ge något tillgång till den fullständiga implementeringen av komponenterna.

Svar #2

Detta problem kan också orsakas av Angular digest, eftersom jag körde och kontrollerade din kod, kan jag lyssna på profilePicture Observable varje gång. Så nedanstående block kommer att köras varje gång, vilket alltid anropar getProfilePicture.

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

Jag kan se på ngOnInit() att du kan hämta profilbilden med userPic() men inte på observabelnivå. Så jag tvivlar på att du kanske gör några JavaScript-nivåmanipulationer på dina data, vilket Angular inte kommer att vara medveten om. Jag har stött på detta problem flera gånger, så jag är inte säker på om du gör något sådant i this.processGetProfilePicture(response_)-metoden eller någon annanstans. Vänligen se till det.

Hoppas det här hjälper.

Relaterade artiklar