Angular：如何映射“mat-checkbox”数组以获取与选中的复选框关联的字符串

Question

作为序言，我已经找到了一个在我尝试过的情况下对我有用的解决方案，但我对 javascript 和 RXJS 还很陌生，并不完全理解该解决方案的作用我不确定它是否适用于所有情况。

我正在使用反应式表单并有复选框数组，我想做的是获取用于生成复选框的所有键的数组，但没有任何未选中的框。理想情况下，我可以将它用于 return 其他值以及用户可读的字符串，但这远非重要，因为我可以在单独的步骤中相当轻松地做到这一点。我想出了一些自己的方法，但它们似乎不是很稳健或高效。

我会在上回复，但我缺乏声誉。

这是我找到的最好的解决方案，我非常乐意使用它，但我在 javascript 中对 RXJS 或地图没有太多经验，所以我不太确定它是什么正在做：

this.controlNames = Object.keys(this.checkboxGroup.controls).map(_=>_); //This seems to just produce an object of control keys as properties and their value
this.selectedNames = this.checkboxGroup.valueChanges.pipe(map(v => Object.keys(v).filter(k => v[k]))); //Some sort of magic happens and an array is generated and contains only the keys whose values are 'true'

我试过将那个片段分开并使用 console.log 来测试它在每个步骤中的作用，但它并没有给我太多有用的信息。任何建议或更好的想法将不胜感激，javascript 中似乎有很多人们遵守的约定，很难区分什么是约定，什么是实际做某事。

Answer 1

我想我找到了一种分解它并掌握它的方法，并想 post 我对前来寻找的人的解释。

在这部分，它只是创建一个 'checkboxGroup.controls' 对象的可迭代映射。这可能已用于在模板中循环并制作所有复选框。因为我的表单结构已经从具有已知属性的对象数组生成，所以我不需要这个。下划线在这里没有做任何特别的事情，人们只是喜欢将它们用于私有变量。

this.controlNames = Object.keys(this.checkboxGroup.controls).map(_=>_);

对于箭头函数或javascript的一些约定不熟悉的人，上面的代码并不完全，但本质上是shorthand：

this.controlNames = [];
Object.keys(this.checkboxGroup.controls).forEach(function(key) {
  this.controlNames.push(key);
}

我已将较短的变量更改为较长的变量，以便在第二部分中更容易理解它们。这将可观察到的值更改映射为可迭代 'changesObj'，检索键，并按键具有真值的实例过滤键。代码 filter(key => changesObj[key]) returns 如果密钥不为 null、未定义或 false。

this.selectedNames = this.checkboxGroup.valueChanges.pipe(map(changesObj => Object.keys(changesObj).filter(key => changesObj[key])));

这实际上只是 shorthand 为此：

function propNotFalse (changes, prop) {
  return changes[prop] == true;
}

this.selectedNames = this.alternateFilter = Object.keys(this.checkboxGroup.valueChanges).filter(this.propNotFalse.bind(null, this.checkboxGroup.valueChanges));

Angular：如何映射“mat-checkbox”数组以获取与选中的复选框关联的字符串

Angular: How to map an array of 'mat-checkbox's to get strings associated with the checked checkboxes

javascript

angular

typescript

rxjs

angular2-forms