Как связать мой поисковый фильтр с моим списком компонентов в угловых? - PullRequest
Новая
       21

Как связать мой поисковый фильтр с моим списком компонентов в угловых?

0 голосов
/ 28 июня 2018

Я сделал список и панель поиска с реализованной функцией фильтра.

Вот моя панель поиска с моей функцией фильтра. 

<div>
    <mat-form-field class="example-full-width">
        <input matInput #message maxlength="256" 
          placeholder="Type vehicle name" (input)='filter(message.value)' >
            <mat-hint align="start"><strong>Find vehicle</strong> </mat-hint>
            <mat-hint align="end">{{message.value.length}} / 256</mat-hint>
    </mat-form-field>
</div>

Вот мой список 

 <div>
  <mat-nav-list>
    <mat-list-item *ngFor="let stuff of vehicleDetails">
       <a matLine> {{ stuff.name }} </a>
       <button mat-icon-button id="btn" (mouseover)="showInfo(stuff)">
          <mat-icon>info</mat-icon>
       </button>
    </mat-list-item>
  </mat-nav-list>

</div>

Эти два файла находятся в одном и том же файле .html и совместно используют файл component.ts. Список генерируется путем вызова getVehicleDetails () в моем ngOnInit. 

export class VehiclelistComponent implements OnInit {

vehicleDetails: VehicleDetail[] = [];


constructor(private vehicleService: VehicleService) { }

  ngOnInit() {
    this.getVehicleDetails();
    }


 getVehicleDetails(): void {
   this.vehicleService.getVehicleDetails()
   .subscribe(vehicleDetails => {
  this.vehicleDetails = vehicleDetails;
   });
 }

И это функция, которую я использую для фильтрации: 

filter(searchToken: string) {
  if (searchToken == null) {
    searchToken = '';
  }
  searchToken = searchToken.toLowerCase();
  return this.vehicleDetails.filter((elem: VehicleDetail) => 
         elem.name.toLowerCase().indexOf(searchToken) > -1);

  }

Почему это не работает? Функция фильтра не оказывает никакого влияния на мой список. Кто-нибудь знает, как мне это решить?

1 Ответ

0 голосов
/ 28 июня 2018

Что вы пытаетесь использовать (keyup) вместо (input), а затем вам нужно повторно связать ваш массив с результатом фильтра ... не вернуть его из вашего метода?

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

<div>
    <mat-form-field class="example-full-width">
        <input matInput #message maxlength="256" 
          placeholder="Type vehicle name" [ngModel]="message.value" (keyup)='filter($event)' >
            <mat-hint align="start"><strong>Find vehicle</strong> </mat-hint>
            <mat-hint align="end">{{message.value.length}} / 256</mat-hint>
    </mat-form-field>
</div>

тогда в вашем TS: 

filter(ev: any) {
let searchToken = ev.target.value;

  if (searchToken == null) {
    searchToken = '';
  }
  searchToken = searchToken.toLowerCase();
this.message.value = searchToken; //here you update the UI (textbox) wth the value .. in this case is not necessary .. but if you wnat for example lowercase the string .. you can do by this
  this.vehicleDetails = this.vehicleDetails.filter((elem: VehicleDetail) => 
         elem.name.toLowerCase().indexOf(searchToken) > -1); // HERE NOT RETUR  .. BUT FULL ARRAY BINDED WITH RESULT OF FILTER

  }

Еще одна вещь, которую я предлагаю вам, это ... не работать с вашим исходным массивом .. но клонировать его и owkr на нем ..

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

export class VehiclelistComponent implements OnInit {

vehicleDetails: VehicleDetail[] = [];
vehicleDetailsCloned: VehicleDetail[] = [];

constructor(private vehicleService: VehicleService) { }

  ngOnInit() {
    this.getVehicleDetails();
    }


 getVehicleDetails(): void {
   this.vehicleService.getVehicleDetails()
   .subscribe(vehicleDetails => {
  this.vehicleDetails = vehicleDetails;
this.vehicleDetailsCloned = [ ...vehicleDetails]; //cloned with spread operator
   });
 }


filter(searchToken: string) {
  if (searchToken == null) {
    searchToken = '';
  }
  searchToken = searchToken.toLowerCase();
  this.vehicleDetails = searchToken.length>0 
        ? this.vehicleDetailsCloned.filter((elem: VehicleDetail) => 
                   elem.name.toLowerCase().indexOf(searchToken) > -1)
        :  this.vehicleDetailsCloned ;

  }
...