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

Posted 2023-03-13

【中文标题】更新可观察打字稿中的数组值

【英文标题】：Update array value inside observable typescript

【发布时间】：2020-11-11 11:23:45

【问题描述】：

你如何编写一个接受 Observable 并更新 observable 内部值的函数。 我尝试了以下方法，但我觉得我没有以正确的方式进行更新。 我想用 row 对象更新 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));

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

堆栈闪电战：https://stackblitz.com/edit/rxjs-gdgkyk?devtoolsheight=60

【问题讨论】：

在这种情况下，第一个subscribe 只是访问您已经有权访问的底层数组的间接方式。如果 observable 没有为每个订阅重用相同的底层，就像它创建一个新数组一样，这将不起作用。相反，请尝试modifiedGridData$ = gridData$.pipe(map(val => // modify and return array))。此外，.subscribe((val: any) => 和 .forEach((list: any) => 是错误代码。相反，写.subscribe((val) => 和.forEach((list) => - 保留你的类型。 Example

@AluanHaddad 工作

【参考方案1】：

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

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

请注意，我使用了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$ 时，它都会执行新的 observable。

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