Angular: Как отобразить массив 'mat-checkbox', чтобы получить строки, связанные с установленными флажками - PullRequest
Новая
       31

Angular: Как отобразить массив 'mat-checkbox', чтобы получить строки, связанные с установленными флажками

0 голосов
/ 25 марта 2019

В качестве предисловия я нашел решение, которое работает для меня в ситуациях, которые я пробовал, но я довольно плохо знаком с 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 существует множество соглашений, которых придерживаются люди, и может быть трудно разобраться, что такое соглашение и что на самом деле делает что-то.

1 Ответ

0 голосов
/ 26 марта 2019

Я думаю, что нашел способ сломать его, взять его в свои руки и хочу опубликовать свое объяснение для всех, кто приходит посмотреть.

В этой части это просто создание итерируемой карты объекта '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', извлекает ключи и фильтрует ключи по случаям, когда ключ имеет истинное значение. Код 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));
...