Javascript没有正确映射

Question

我在“安慰”整个密码..。但我找不到任何问题，只有奇怪的行为。

让我解释一下:我有一个角分量(我们称之为父)，它通过inputTags数组向他的子发送一些标记。然后，我需要用用户的所有标记设置另一个列表，名为allTags。

数组( inputTags和allTags)的格式如下：{ id：'tagId'，名称：'tagName‘}

我需要把这两者统一起来。预期的输出应该包含一个项目数组，其格式如下：{ id：'tagId'，name：'tagName'，selected: boolean }

为了做到这一点，我以这样的方式映射allTags数组：

让我们假设：

inputTags = [
    { id: 'work', name: 'Work' },
    { id: 'motivation', name: 'Motivation' }
];

allTags = [
    { id: 'network', name: 'Network' },
    { id: 'work', name: 'Work' },
    { id: 'smart', name: 'Smart' },
    { id: 'motivation', name: 'Motivation' }
];

现在..。allTags实际上是从服务器中检索的，所以我的代码如下所示：

this.tagsService.getAll().subscribe(tags => {

    this.allTags = tags.map(tag => {
        let select = false;
        this.inputTags.forEach(inputTag => { select = (inputTag.id === tag.id) })
        return {
          id: tag.id,
          name: tag.name,
          selected: select,
        };      
    });

})

这对我来说似乎很标准，但实际上不是，因为没有得到：

allTags = [
    { id: 'network', name: 'Network', selected: false },
    { id: 'work', name: 'Work', selected: true }, // is selected
    { id: 'smart', name: 'Smart', selected: false },
    { id: 'motivation', name: 'Motivation', selected: true } // is selected
];

我明白了：

allTags = [
    { id: 'network', name: 'Network', selected: false },
    { id: 'work', name: 'Work', selected: false }, // is NOT selected
    { id: 'smart', name: 'Smart', selected: false },
    { id: 'motivation', name: 'Motivation', selected: true } // is selected
];

基本上问题是，它只选择一个标签，而不是多个标签。

Answer 1

你可以试试一些

this.allTags = tags.map(tag => {
    return {
      id: tag.id,
      name: tag.name,
      selected: this.inputTags.some(inputTag => inputTag.id === tag.id)
    };      
});

Answer 2

JavaScript数组映射()方法

*)创建一个新数组，其结果是为每个数组元素调用一个函数，并按顺序对数组中的每个元素调用提供的函数一次。

注意：map()方法不为没有值的数组元素执行函数，也不更改原始数组。

Answer 3

尝试以下几点：

this.allTags = allTags.map(tag => ({
  id: tag.id,
  name: tag.name,
  selected: inputTags.some(i => i.id === tag.id),
}))