So I'm fetching an observable array of custom IPix objects (Observable<IPix[]>) from a db (via an API) and then updating a record in the db by passing an edited copy of the IPix object back to the API in a PUT request (based on legacyConfigTrackerId).
I want to know how to replace the original IPix object in the array currently being displayed with the altered copy (based on legacyConfigTrackerId) so that the changes to the record will be reflected in the table right away without having to search/refresh.
Right now I can't even figure out how to filter the array, the result of the filter keeps coming back undefined and then nothing is displayed:
pixRecords$!: Observable<IPix[]>;
updatePix(pix: IPix) {
console.log('update clicked');
this.pixRecords$ =
this.pixRecords$.pipe(
map((records: IPix[]) =>
records.filter((p: IPix) => {
p.legacyConfigTrackerId !== pix.legacyConfigTrackerId
// need to do something to replace original object in array with the 'pix' argument
})
)
);
pix.contract.effectiveDate = this.revertEffDateFormat();
pix.contract.termDate = this.revertTermDateFormat();
this.pixService.putPix(pix);
this.formattedEffDate = '';
this.formattedTermDate = '';
this.closeModal.next(null);
}
I'm new to Angular so maybe my approach is all wrong, I'm open to suggestions.