Не удается отфильтровать, используя флажки в угловых 2+ - PullRequest
Новая
       27

Не удается отфильтровать, используя флажки в угловых 2+

0 голосов
/ 23 мая 2019

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

Участники: 

[
    { 'name': 'test1', 'provider' : {'name': 'provider1'}}
    { 'name': 'test2', 'provider' : {'name': 'provider2'}}
    { 'name': 'test3', 'provider' : {'name': 'provider3'}}
    { 'name': 'test4', 'provider' : {'name': 'provider1'}'}
 ..
]

Мой HTML-шаблон:

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

<div class="form-group" *ngFor="let provider of providers">
    <input type="checkbox" name="providers" value="{{ provider.name }}" [(ngModel)]="provider.checked"
    (change)="displayParticipantsByProvider($event.target.value)">{{ provider.lastName }}
</div>

А вот как я отображаю участников: 

<ul>
    <li *ngFor="let p of participants">{{ p.name }} - {{ p.provider.name }} </li>
</ul>

И моя функция фильтра в компоненте: 

displayParticipantsByProvider(filterVal: any) {
    if (filterVal === '0') {
      this.participants = this.cathechParticipants;
    } else {
      this.participants = this.participants.filter((item) => item.provider.includes(filterVal));
    }
}

Этот фильтр возвращает только проверенный элемент. Например, если провайдер 1 выбран из флажка, он возвращает участников, в которых есть провайдер1. Если я выберу провайдера2 из флажка, он возвращает только участников с провайдером2 в нем. Моя цель - загрузить их обоих, так как они оба выбраны. Итак, как я могу загружать участников, используя несколько флажков, которые позволяют мне фильтровать?

Ответы [ 3 ]

1 голос
/ 23 мая 2019

Отслеживайте выбранные элементы, сопоставляйте их со списком поставщиков и добавляйте их в массив участников.

Следующий пример сделан с угловым материалом. 

export class AppComponent {
  selectedProviders: any[];
  providers: any[];
  participants: any[];

  providerChange() {
    this.participants = [];
    for (const sp of this.selectedProviders) {
      for (const p of this.providers) {
        if (sp.provider.name === p.provider.name) {
          this.participants.push(p);
        }
      }
    }
  }

  ngOnInit() {
    this.providers = [
      { 'name': 'test1', 'provider': { 'name': 'provider1' } },
      { 'name': 'test2', 'provider': { 'name': 'provider2' } },
      { 'name': 'test3', 'provider': { 'name': 'provider3' } },
      { 'name': 'test4', 'provider': { 'name': 'provider1' } }
    ]
  }
}

HTML: 

<mat-list-item class="primary-imenu-item" role="listitem">
    <mat-form-field class="select-form">
        <mat-select 
        placeholder="Providers" 
        name="providers" 
        class="filter-select" 
        [(ngModel)]="selectedProviders"
        (change)="providerChange()"
        multiple>
          <mat-option *ngFor="let p of providers" [value]="p">
            {{p.provider.name}}
          </mat-option>
        </mat-select>
    </mat-form-field>
  </mat-list-item>

  <ul>
    <li *ngFor="let p of participants">{{p.name}}</li>
  </ul>

StackBlitz

0 голосов
/ 23 мая 2019

HTML-код 

<div class="form-group" *ngFor="let provider of providers;let i = index">
  <input type="checkbox" name="providers" value="{{ provider.name }}" [(ngModel)]="provider.checked"
  (change)="displayParticipantsByProvider()"><span class="font-weight-bold">{{ provider.name }}</span>
</div>
<ul>
  <li *ngFor="let p of participants">{{ p.name }} - {{ p.provider.name }} </li>
</ul>

КОД ТС 

participants = [];
 providers =  [
    { 'name': 'test1', 'provider' : {'name': 'provider1'}, checked: false},
    { 'name': 'test2', 'provider' : {'name': 'provider2'}, checked: false},
    { 'name': 'test3', 'provider' : {'name': 'provider3'}, checked: false},
    { 'name': 'test4', 'provider' : {'name': 'provider1'}, checked: false}
 ];
displayParticipantsByProvider() {
    this.participants = this.providers.filter((item, idx) => {
      if (item.checked) {

        return item;
      }
    });

  }
0 голосов
/ 23 мая 2019

вы можете проверить список провайдеров и посмотреть, у кого свойство 'флажок' установлено в true (вы будете использовать привязку ngModel)

...