亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

RxJs 行為數組允許設置/訂閱單個項目的主題

RxJs 行為數組允許設置/訂閱單個項目的主題

波斯汪 2022-09-16 21:29:04
我想使用一個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";          }我希望這將是一種更簡單的方法...謝謝
查看完整描述

1 回答

?
慕虎7371278

TA貢獻1802條經驗 獲得超4個贊

我還想提供一種簡單的方法來訂閱對該數組的特定項的更改。我知道這可以用過濾器完成,但更簡單的方法會很好...


您可以使用地圖運算符和內部 lambdaarray.find



const mockStorage = {

  values: {},

  setItem(key, value) {

    this.values[key] = value;

  },

  getItem(key) {

    return this.values[key]

  },

  clearItem(key) {

    this.values[key] = undefined;

  }

}


class LocalStorageBehaviorSubject {


  constructor(key, defaultValue) {

    this.key = key;

    this._data = new rxjs.BehaviorSubject(defaultValue);

  }


  nextItem(item) {

    const list = this._data.value;

    const itemIndex = list.findIndex(pr => pr.id === item.id);

  

    this._data.next([

      ...list.slice(0, itemIndex),

      {

        ...(list[itemIndex] || {}),

        ...item

      },

      ...list.slice(itemIndex + 1)

    ]);

  }


  removeItem(id) {

    this._data.next(this._data.value.filter(pr => pr.id !== id));

  }


  getItem(id) {

    return this.asObservable()

      .pipe(

        rxjs.operators.map(values => values.find(pr => pr.id === id) || null), 

        rxjs.operators.distinctUntilChanged());

  }


  asObservable() {

    return this._data.asObservable().pipe(

      rxjs.operators.tap(values => {

        if (values && values.length) {

          mockStorage.setItem(this.key, JSON.stringify(values));

        }

        else {

          mockStorage.clearItem(this.key);

        }

      }))

  }


}


const localStorageBehaviorSubject = new LocalStorageBehaviorSubject('items', []);


localStorageBehaviorSubject

  .getItem(1)

  .subscribe(item => {

    console.log(item);

  })

  

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>


查看完整回答
反對 回復 2022-09-16
  • 1 回答
  • 0 關注
  • 145 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號