Как фильтровать матовые чипсы в angular - PullRequest
Новая
       23

Как фильтровать матовые чипсы в angular

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

Я занимаюсь angular проектом и хочу разрешить пользователю искать / фильтровать по существующим тегам (mat-chips). У меня есть окно поиска, и я могу отфильтровать обычный список, но когда я попытался сделать это для тегов, я не уверен, как.

Мой матовый чип внутри home.component. html. 

    <mc-tags [chips] = "tags" ></mc-tags>

Поле моего поиска внутри home.component. html

     <input matInput (input)="updateQuery($event.target.value)" class="input" >

данные внутри list.ts 

    export const tags = ['Google', 'Manufacturer'];

home.component.ts file 

import { Component, OnInit } from '@angular/core';
import { users, tags } from './users.data';

@Component({
  selector: 'mc-explore',
  templateUrl: './explore.component.html',
  styleUrls: ['./explore.component.scss']
})
export class ExploreComponent{

  query: string;
  users = users;
  tags = tags;

  updateQuery(query: string) {
    this.query = query;
  }
}

Вот как это выглядит прямо сейчас

Изображение

Так я обычно фильтрую обычный список / data 

    <div [hidden]="!query">
    <div *ngFor="let name of users | search:query">{{ name }}</div>
    </div>

Файл Stackblitz без тегов m c, поскольку он используется из разных компонентов

https://stackblitz.com/edit/angular-vcklft

1 Ответ

1 голос
/ 26 марта 2020

Вы можете сделать то, что описано ниже.

Изменить это: 

<input matInput (input)="updateQuery($event.target.value)" class="input" >

на это: 

<input [formControl]="_inputCtrl" matInput class="input" >

И измените это: 

<mc-tags [chips] = "tags" ></mc-tags>

на это: 

<mc-tags [chips]="_filteredTags" ></mc-tags>

Добавьте этот код в машинописный текст вашего компонента : 


_filteredTags = [];

_inputCtrl: FormControl = new FormControl();

private _destroy$ = new Subject<void>();

ngOnInit(): void {
  this._filterTags();

  this._inputCtrl.valueChanges
    .pipe(takeUntil(this._destroy$))
    .subscribe((value: string) => {
      this._filterTags(value);
      this.updateQuery(value);
    });
}

ngOnDestroy(): void {
  if (this._destroy$ && !this._destroy$.closed) {
    this._destroy$.next();
    this._destroy$.complete();
  }
}

updateQuery(query: string) {
  this.query = query;
}

private _filterTags(filterValue?: string) {
  if (!filterValue) {
    this._filteredTags = [...tags];
    return;
  }

  this._filteredTags = this.tags.filter((v: string) =>
    v.toLowerCase().includes(filterValue.toLowerCase().trim())
  );
}

[ОБНОВЛЕНИЕ]: Я собрал эту демонстрацию стекаблика

...