Angular Typescript - Multi filter с флажками - PullRequest
Новая
       12

Angular Typescript - Multi filter с флажками

0 голосов
/ 14 декабря 2018

Я работаю над Stackblitz и, к сожалению, врезался в стену и теперь просто кружусь по кругу!

Я ищу, чтобы отфильтровать массив на основе значений нескольких флажков, которые необходимо включитьв конкретном объекте для того, чтобы его оставили в DOM.

Вот Stackblitz - https://stackblitz.com/edit/angular-ycebgh

Это мой массив json: 

cards = [
    {
      name: "Daniel",
      profile: [
        {
          type: "Gender",
          name: "Male"
        },
        {
          type: "Fashion",
          name: "Footwear"
        }
      ]
    },
    {
      name: "John",
      profile: [
        {
          type: "Gender",
          name: "Male"
        },
        {
          type: "Family",
          name: "Children"
        }
      ]
    },
    {
      name: "Sarah",
      profile: [
        {
          type: "Gender",
          name: "Female"
        }
      ]
    },
    {
      name: "Janice",
      profile: [
        {
          type: "Gender",
          name: "Female"
        },
        {
          type: "Family",
          name: "Children"
        }
      ]
    }
  ]

В настоящее время я отправляю событие click флажка в родительский объект, и мне нужно, чтобы родительский элемент затем отфильтровал объекты в зависимости от выбранных значений флажков.

Мне удалось сделать это по одному за раз, но иметь несколькооказывается борьба.

Что-то вроде: 

onFilter(options) {
    console.log(options);
    this.cards.filter(x => x.profile == options.value );
  }

Любое понимание того, что мне нужно сделать, чтобы достичь этого было бы здорово.

Ответы [ 2 ]

0 голосов
/ 14 декабря 2018

У вас были некоторые проблемы с управлением данными.

См. рабочий стек

0 голосов
/ 14 декабря 2018

Хорошо, что вам нужно, это обнаружение изменений.В этом случае вы можете использовать ngModelChange.Это будет выглядеть так:

(ngModelChange)="onChange($event) "

А в компоненте: 

onChange() {
    this.filter.emit(this.options);
  }

Что это будет делать при выходе изменений в ваш родительский компонент.может читать массив и делать с данными все, что вы хотите. С этого момента я думаю, что вы можете сами управлять этим.

...