如何在 angular 中使用 map/filter/find/findIndex 更改 BehaviorSubject 的值

Question

TS

  arrData = new BehaviorSubject<any>([]);

  ngOnInit() {
    const dataArr1 = [
      {
        id: '1',
        name: 'Room1',
        spinning: true
      },
      {
        id: '2',
        name: 'Room2',
        spinning: true
      },
      {
        id: '3',
        name: 'Room3',
        spinning: true
      },
      {
        id: '4',
        name: 'Room4',
        spinning: true
      }
    ];

    this.arrData.next(dataArr1);

    const url = { id: '2', name: 'Room2', link: '/api/conditions'}
    const arr = new Array();
    arr.push(url);

    this.arrData.value.map((item: any) => {
      return {
        id: item.id,
        name: item.name,
        spinning: arr.findIndex(e => {
          return e.id === item.id
        }) === -1
      }
    });
    console.log(this.arrData.value);
  }

這是示例 output： https://stackblitz.com/edit/angular-msovvq?file=src/app/app.component.ts

我在這里要做的是將 spin 的值更改為 false。

在示例中有數據 object { id: 2, name: 'Room2' }然后我將其推入數組。

我使用 findIndex where dataArr1 id === arr id，但這里的問題它不會將旋轉值更改為 dataArr1 的假。

它還是一樣。

[
      {
        id: '1',
        name: 'Room1',
        spinning: true
      },
      {
        id: '2',
        name: 'Room2',
        spinning: true
      },
      {
        id: '3',
        name: 'Room3',
        spinning: true
      },
      {
        id: '4',
        name: 'Room4',
        spinning: true
      }
    ];

它應該是這樣的。

[
      {
        id: '1',
        name: 'Room1',
        spinning: true
      },
      {
        id: '2',
        name: 'Room2',
        spinning: false
      },
      {
        id: '3',
        name: 'Room3',
        spinning: true
      },
      {
        id: '4',
        name: 'Room4',
        spinning: true
      }
    ];

Room2旋轉將變為 false。

Answer 1

我建議你使用 map 和這樣的過濾器。 Map 和過濾器返回一個新數組，而不是改變值本身，因此將結果重新綁定到變量。

dataArr1 = dataArr1.map(item => {
  return {
    id: item.id,
    name: item.name,
    spinning: dataArr2.findIndex(e => {
      return e.id === item.id
    }) === -1
  }
})

這就是結果，這是你所期望的嗎？

[
  {
    "id": "1",
    "name": "Room1",
    "spinning": false
  },
  {
    "id": "2",
    "name": "Room2",
    "spinning": false
  },
  {
    "id": "3",
    "name": "Room3",
    "spinning": false
  },
  {
    "id": "4",
    "name": "Room4",
    "spinning": true
  }
]

Answer 2

使用lodash

let tmp = [
      {
        id: '1',
        name: 'Room1',
        spinning: true
      },
      {
        id: '2',
        name: 'Room2',
        spinning: true
      },
      {
        id: '3',
        name: 'Room3',
        spinning: true
      },
      {
        id: '4',
        name: 'Room4',
        spinning: true
      }
    ];

由於我們只使用 id 來查找：

let url =  { id: '2', name: 'Room2', link: '/api/conditions'}

let _tmp_row= _.find(tmp,{id:url['id']})
_tmp_row.spinning = false

根據您的模式找到元素后，您可以根據需要更改 object 屬性。 由於此 object 未被克隆，因此它將直接更新對對象主數組的更改。