Memperbarui nilai array di dalam observable typescript

Bagaimana cara menulis fungsi yang menerima Observable<T[]> dan memperbarui nilai di dalam observable. Saya mencoba dengan pendekatan di bawah ini tetapi saya merasa saya tidak memperbarui dengan cara yang tepat. Saya ingin memperbarui nilai-nilai dari observable dengan objek baris.

import { of } from 'rxjs'; 
import { map } from 'rxjs/operators';

let gridData = [
     {
      id: '1',
      firstName: 'Sophie',
      lastName: 'Beckham',
      gender: 'F',
      jobTitle: 'Senior Associate-L1',
      jobArea: 'London',
      monthlyWage: '$100000',
    },
    {
      id: '2',
      firstName: 'Sophie',
      lastName: 'Beckham',
      gender: 'F',
      jobTitle: 'Senior Associate-L2',
      jobArea: 'London',
      monthlyWage: '$100000',
    },
    {
      id: '3',
      firstName: 'Chloe',
      lastName: 'Bryson',
      gender: 'F',
      jobTitle: 'Senior Associate-L3',
      jobArea: 'London',
      monthlyWage: '$100000',
    },
  ];

let gridData$ = of(gridData);

let row = {
     id: '2',
      firstName: 'TAN',
      lastName: 'Ara',
      gender: 'M',
      jobTitle: 'Senior Associate',
      jobArea: 'ATL',
      monthlyWage: '$130000',
}
gridData$.subscribe((val: any) => {
   val.forEach((list: any) => {
     if(list['id'] === row['id']){
        for (const property in row) {
          list[property]  = row[property];
       }
     }
   })
})
gridData$.subscribe((v) => console.log(v));

Dalam pendekatan saya, saya telah menggunakan perulangan for dan berdasarkan ID objek memperbarui nilainya. Jika ada pendekatan yang lebih baik, mohon bagikan pendekatan Anda.

StackBlitz : https://stackblitz.com/edit/rxjs-gdgkyk?devtoolsheight=60

Jawaban #1

Observables bersifat tanpa status dan disarankan agar nilai yang dipancarkan bersifat tidak dapat diubah.

Tetapi Anda dapat mengembalikan observable baru yang mengembalikan apa yang Anda inginkan dengan menggunakan operator map (pada semua nilai).

Perhatikan bahwa saya telah menggunakan from alih-alih operator of.

import { from } from 'rxjs'; 
import { map } from 'rxjs/operators';

...

let gridData$ = from(gridData);

...

gridData$ = gridData$.pipe(
  map((val: any) => {
   
     if(val['id'] === row['id']){
        for (const property in row) {
          val[property]  = row[property];
       }
     }

     return val;
 })
);

gridData$.subscribe((v) => console.log(v));

Sekarang setiap kali Anda memanggil gridData$ itu akan menjalankan observable yang baru.

https://stackblitz.com/edit/rxjs-6mh6iu