如何使用map/filter/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);
  }

下面是示例输出：https://stackblitz.com/edit/angular-msovvq?file=src/app/app.component.ts

我在这里要做的是把旋转的值改为假的。

在这个例子中，有一个数据对象{ id: 2, name: 'Room2' }，然后我将它推送到一个数组中。

在这里，我使用了findIndex where id dataArr1 === arr id，但是这里的问题并不是将旋转值更改为dataArr1的false。

还是一样的。

[
      {
        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和filter返回一个新数组，而不是改变值本身，因此将结果重新绑定到变量。

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

使用房客

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属性。由于该对象未被克隆，因此它将直接更新对对象主数组的更改。