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

Question

作为序言，我已经找到了一个适合我的解决方案，但是我对javascript和RXJS相当新，并且不完全理解解决方案在做什么，所以我不能确定它是否会在每个实例中工作。

我正在使用被动表单并且有复选框数组，我想要做的是获取用于生成复选框的所有键的数组，但没有任何未选中的框。理想情况下，我可以使用它来返回其他值，例如用户可读的字符串，但这远非重要，因为我可以相当容易地在单独的步骤中执行此操作。我已经提出了一些自己的方法，但它们似乎并不是非常强大或高效。

我会回复this thread，但我缺乏声誉。

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

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

我想我找到了一种方法来分解并抓住它，并希望为任何想要看的人发布我的解释。

---

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

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

对于那些不熟悉箭头函数或javascript的一些约定的人来说，上面的代码并不完全，但基本上是简写：

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

---

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

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

这基本上只是简写：

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));