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

【问题标题】：Angular: How to map an array of 'mat-checkbox's to get strings associated with the checked checkboxesAngular：如何映射“mat-checkbox”数组以获取与选中复选框关联的字符串
【发布时间】：2019-08-15 19:54:06
【问题描述】：

作为序言，我找到了一个在我尝试过的情况下适合我的解决方案，但我对 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'

我尝试将 sn-p 拆分并使用 console.log 来测试它在每个步骤中所做的事情，但它确实没有给我太多有用的信息。任何建议或更好的想法都将不胜感激，在 javascript 中似乎有很多人们遵守的约定，并且很难区分什么是约定和实际在做什么。

【问题讨论】：

标签： javascript angular typescript rxjs angular2-forms

【解决方案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”，检索键，并通过键具有真值的实例过滤键。如果 key 不为 null、undefined 或 false，则代码 filter(key => changesObj[key]) 返回 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));

【讨论】：