CODEWITHSUNDEEP
javascriptangulartypescriptrxjs
TheCoderGuy
TheCoderGuy

Reputation: 883

Using ReplaySubject in Angular at PUT Request it is losing the data

I am having an issue with the ReplaySubject, I don't know what I have done wrong but the problem it is that when I change something and save it in backend, the ReplaySubject it calls new data but it is hiding them to show me see the picture. I tried to use detectChanges but without any luck, but as i know the detectChanges will work only when we have parent -> child iterration.

This happens on update This happens when I update

This happens when I reload the page This is when I reload

If I remove the the this.data.next(res) at this line of the Put Request then it works but I need again to reload page to get new data.

 return this.http.put(api, dataModel).subscribe(res => this.data.next(res));

This is the code of the service.

@Injectable({
  providedIn: "root"
})
export class ModelDataService {
  public baseUrl = environment.backend;
  private data = new ReplaySubject<any>();
  public userID = this.authService.userID;


  constructor(private http: HttpClient, private authService: AuthService) {
  }

   public getJSON() {
    return this.http.get(`${this.baseUrl}/data/${this.userID}`).subscribe(res => this.data.next(res));
  }

  public dataModel(): Observable<any> {
    return this.data.asObservable();
  }
  public setData(data: Model) {
    const api = `${this.baseUrl}/data`;
    const user_id = this.authService.userID;
    this.http.post(api, data, {
      headers: {user_id}
    }).subscribe(res => this.data.next(res));
  }

  public updateDate(id: string, dataModel: Model) {
    const api = `${this.baseUrl}/data/${id}`;
    return this.http.put(api, dataModel).subscribe(res => this.data.next(res));
  }
}

This is the component.

 public model$: Observable<Model>;
 public model: Model;


 constructor(
    public authService: AuthService,
    private modelDataService: ModelDataService,
    public dialog: MatDialog,
    public cd: ChangeDetectorRef) {
  }
  ngOnInit() {
    this.authService.getUserProfile(this.userID).subscribe((res) => {
      this.currentUser = res.msg;
    });
    this.modelDataService.getJSON();
    this.model$ = this.modelDataService.dataModel();
    this.model$.subscribe((data) => {
      this.model = data; // here if i try to console log then I have the array but the page it will be blank
    console.log(data);
    });
  }

And then for example I try to show data like this.

   <ng-container class="Unit-unit-unitGroup" *ngFor="let personalData of model.personalData; let id = index">
</ng-container>

In the put Request I have added an console log and this is what I am getting. Pic3

But on reload I am getting I think another way of strucuter of data. See pictureenter image description here

Upvotes: 0

Views: 322

Answers (2)

MoxxiManagarm
MoxxiManagarm

Reputation: 9124

<ng-container class="Unit-unit-unitGroup" *ngFor="let personalData of model.personalData; let id = index">
</ng-container>

this.model$.subscribe((data) => {
      this.model = data; // here if i try to console log then I have the array but the page it will be blank
    console.log(data);
    });

public updateDate(id: string, dataModel: Model) {
    const api = `${this.baseUrl}/data/${id}`;
    return this.http.put(api, dataModel).subscribe(res => this.data.next(res));
  }

You expect personalData to be a property of your model. However, as seen in the console log your res is an object including data as an object between. All you need to do is mapping res to it's data.

public updateDate(id: string, dataModel: Model) {
    const api = `${this.baseUrl}/data/${id}`;
    return this.http.put(api, dataModel).subscribe(res => this.data.next(res.data));
  }

Upvotes: 1

digitalkoi
digitalkoi

Reputation: 146

Use ChangeDetectorRef to detect changes again in the view when the data comes back.

this.model$.subscribe((data) => {
  this.model = data;
  this.cd.detectChanges();
});

Upvotes: 2

Related Questions