Отфильтровать несколько раскрывающихся значений в Angular 8 на основе некоторых наблюдаемых - PullRequest
Новая
       75

Отфильтровать несколько раскрывающихся значений в Angular 8 на основе некоторых наблюдаемых

0 голосов
/ 19 июня 2020

У меня есть следующие элементы управления формой (parent1, parent2, parent3), которые являются флажками. Когда пользователь проверяет / снимает отметку с любого из них, появляются следующие массивы форм, состоящие из нескольких флажков выбора с примерами данных, приведенными ниже: 

  // Child1 with Parents - parent1, parent2, parent3
   c1Data = [
      {"id":1, "desc":"a","p1":0,"p2":1, "p3":1, "selected": false, "disabled": false },
      {"id":2, "desc":"b","p1":0,"p2":1, "p3":1, "selected": false, "disabled": false },
      {"id":3, "desc":"c","p1":1,"p2":1, "p3":0, "selected": false, "disabled": false },
   ];

// Child2 with Parents - parent2, parent3, child1
   c2Data = [
      {"id":10, "desc":"d", "p2":1, "p3":1, "c1": 1, "selected": false, "disabled": false },
      {"id":20, "desc":"e", "p2":1, "p3":1, "c1": 1, "selected": false, "disabled": false },
      {"id":30, "desc":"f", "p2":1, "p3":0, "c1": 2, "selected": false, "disabled": false },
      {"id":40, "desc":"g", "p2":1, "p3":0, "c1": 3, "selected": false, "disabled": false },
   ];

// Child3 with Parents - parent1, parent2, parent3, child1, child2
   c2Data = [
      {"id":100, "desc":"i", "p1":1, "p2":0, "p3":1, "c1": 1, "c2": 10, "selected": false, "disabled": false },
      {"id":200, "desc":"j", "p1":1, "p2":1, "p3":1, "c1": 1, "c2": 20, "selected": false, "disabled": false },
      {"id":300, "desc":"k", "p1":0, "p2":1, "p3":0, "c1": 2,  "c2": 30, "selected": false, "disabled": false },
      {"id":400, "desc":"l", "p1":0, "p2":1, "p3":0, "c1": 3,  "c2": 40, "selected": false, "disabled": false },
   ];

// The dependency is 
// User selects: p1=1, p2=0, p3=1, c1=2,3 => 
// c1 => set disabled = true for all items with p1 !== 1, p3 !== 1 
// c2 => set disabled = true for all items with p3 !== 1, c1 not in [2,3]
// c3 => set disabled = true for all items with p1 !== 1, p3 !== 1, c1 not in [2,3]
//  For c1, c2, c3 set disabled = false for all other items
//  If any item selected in c1, c2 and c3 - if the item(s) are disabled, set selected = false
//  If any parent is not selected, do not apply filter on that parent column

Я пытаюсь достичь этого с помощью наблюдаемых более высокого порядка : 

  const p1$ = this.parent1.valueChanges.pipe(map(val => val ? 1 : 0));
  const p2$ = this.parent2.valueChanges.pipe(map(val => val ? 1 : 0));
  const p3$ = this.parent3.valueChanges.pipe(map(val => val ? 1 : 0));

  //For child1 jsut a sample
// not sure if the below operator and combination is correct
  combineLatest([p1$, p2$, p3$]).pipe(
            switchMap(([p1, p2, p3]) => {
                  return  c1Data.map(c1 => {
                        c1.disabled = c1.p1 === p1 && c1.p2 === p2 );
                    });
                }
            )).subscribe(data => {
                this.updateFormArray(data, 'child1formarray');
            });
// The issues I face are:
// - None of the valuechanges fires
// - I do not want to apply c1.p1 === p1 when p1 is not set (ex: p1 === 0)
// - In case of c2, c3, when c1 = [], i dont want to filter by c1 , just set all values to disabled = false
//I also ave a object that will have the properties for selected filters
//I update as user checks/unchecks each value
selected {
p1: [1],
p2: [0],
p3: [1],
c1: [2,3] 
} //c2, c3 are not added as they do not have a selection. All properties are nullable
// I can also use this in SwitchMap instead of the array of the individual observables

Любая помощь и руководство приветствуются. Заранее большое спасибо!

...