Question

如何编写一个采用Observable 并更新Observable内部值的函数。我尝试使用以下方法，但是我觉得我没有以正确的方式进行更新。我想用行对象更新可观察对象的值。

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

在我的方法中，我已用于循环并基于对象ID更新值。如果有更好的方法，请分享您的方法。

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

Answer 1

Observables是无状态的，建议发出的值是不可变的。

但是您可以返回一个新的observable，它通过使用map运算符（在所有值上）返回所需的内容。

请注意，我使用的是from而不是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));

现在，每次您调用gridData$时，它将执行新的可观察对象。

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

更新可观察的打字稿中的数组值

1 个答案: