RxJs 行为数组允许设置/订阅单个项目的主题

Question

我想使用一个Constorsubject来存储一个对象数组，并有一种方法可以轻松地更新（下一个？）该数组的单个项目，而不必更新整个数组。

我还想提供一种简单的方法来订阅对该数组的特定项的更改。我知道这可以用过滤器完成，但更简单的方法会很好...

这可能吗？

我目前正在使用我创建的这个版本（我不知道这是否是最好的方法），它也将其内容保存到localtorage：

export class LocalStorageBehaviorSubject<T, Y = T> {

  private _data: BehaviorSubject<T>;

  public asObservable() {

    return this._data.asObservable();

  }

  public next(data: T) {

    if(this.expirationFn !== null) {

      data = this.expirationFn(data);

    }

    localStorage.setItem(this.key, JSON.stringify(data));

    this._data.next(data);

  }

  public nextItem(item: Y) {

    if (!Array.isArray(this._data.getValue())) {

      throw "Type is not an Array";      

    }

    let dados: any = (<any>this._data.getValue()).slice();

    if (dados.some(r => r[this.id] === item[this.id])) {

      dados = dados.map(r => r[this.id] === item[this.id] ? item : r);

    } else {

      dados.push(item);

    }

    if(this.expirationFn !== null) {

      dados = this.expirationFn(dados);

    }

    localStorage.setItem(this.key, JSON.stringify(dados));

    this._data.next(<any>dados);

  }

  public removeItem(id) {

    if (!Array.isArray(this._data.getValue())) {

      throw "Type is not an Array";      

    }

    let dados: any = (<any>this._data.getValue()).slice();

    dados = dados.filter(r => r[this.id] !== id);

    localStorage.setItem(this.key, JSON.stringify(dados));

    this._data.next(<any>dados);

  }

  public removeExpiredData(){

    let data = this.loadFromStorage();

    if (data) {

      if(this.expirationFn !== null) {

        data = this.expirationFn(data);

      }

      this._data.next(data);

    }

  }

  public getValue() {

    this.removeExpiredData();

    return this._data.getValue();

  }

  public getItem(id): Y {

    if (!Array.isArray(this._data.getValue())) {

      throw "Type is not an Array";      

    }

我希望这将是一种更简单的方法...

谢谢

Answer 1

我还想提供一种简单的方法来订阅对该数组的特定项的更改。我知道这可以用过滤器完成，但更简单的方法会很好...您可以使用地图运算符和内部 lambdaarray.find例const mockStorage = {&nbsp; values: {},&nbsp; setItem(key, value) {&nbsp; &nbsp; this.values[key] = value;&nbsp; },&nbsp; getItem(key) {&nbsp; &nbsp; return this.values[key]&nbsp; },&nbsp; clearItem(key) {&nbsp; &nbsp; this.values[key] = undefined;&nbsp; }}class LocalStorageBehaviorSubject {&nbsp; constructor(key, defaultValue) {&nbsp; &nbsp; this.key = key;&nbsp; &nbsp; this._data = new rxjs.BehaviorSubject(defaultValue);&nbsp; }&nbsp; nextItem(item) {&nbsp; &nbsp; const list = this._data.value;&nbsp; &nbsp; const itemIndex = list.findIndex(pr => pr.id === item.id);&nbsp;&nbsp;&nbsp; &nbsp; this._data.next([&nbsp; &nbsp; &nbsp; ...list.slice(0, itemIndex),&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; ...(list[itemIndex] || {}),&nbsp; &nbsp; &nbsp; &nbsp; ...item&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; ...list.slice(itemIndex + 1)&nbsp; &nbsp; ]);&nbsp; }&nbsp; removeItem(id) {&nbsp; &nbsp; this._data.next(this._data.value.filter(pr => pr.id !== id));&nbsp; }&nbsp; getItem(id) {&nbsp; &nbsp; return this.asObservable()&nbsp; &nbsp; &nbsp; .pipe(&nbsp; &nbsp; &nbsp; &nbsp; rxjs.operators.map(values => values.find(pr => pr.id === id) || null),&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; rxjs.operators.distinctUntilChanged());&nbsp; }&nbsp; asObservable() {&nbsp; &nbsp; return this._data.asObservable().pipe(&nbsp; &nbsp; &nbsp; rxjs.operators.tap(values => {&nbsp; &nbsp; &nbsp; &nbsp; if (values && values.length) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mockStorage.setItem(this.key, JSON.stringify(values));&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mockStorage.clearItem(this.key);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }))&nbsp; }}const localStorageBehaviorSubject = new LocalStorageBehaviorSubject('items', []);localStorageBehaviorSubject&nbsp; .getItem(1)&nbsp; .subscribe(item => {&nbsp; &nbsp; console.log(item);&nbsp; })&nbsp;&nbsp;localStorageBehaviorSubject.nextItem({id: 1, value: 'test'})localStorageBehaviorSubject.nextItem({id: 1, value: 'test1'})localStorageBehaviorSubject.nextItem({id: 2, value: 'test2'})localStorageBehaviorSubject.nextItem({id: 3, value: 'test3'})localStorageBehaviorSubject.removeItem(2);localStorageBehaviorSubject.removeItem(1);<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.5/rxjs.umd.js"></script>