Angular：如何映射'mat-checkbox'數組以獲取與選中復選框相關聯的字符串

Question

作為前言，我已經找到了一個適合我的解決方案，但是我對javascript和RXJS相當新，並且不完全理解解決方案正在做什么，所以我不能確定它是否會在每個實例中工作。

我正在使用被動表單並且有復選框數組，我想要做的是獲取用於生成復選框的所有鍵的數組，但沒有任何未選中的框。 理想情況下，我可以使用它來返回其他值，例如用戶可讀的字符串，但這遠非重要，因為我可以相當容易地在單獨的步驟中執行此操作。 我已經提出了一些自己的方法，但它們似乎並不是非常強大或高效。

我會在這個帖子上回復，但我缺乏聲譽。

這是我找到的最好的解決方案，我會非常樂意使用它，但是我沒有太多使用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));