Website-Suche

javascript - Wie implementiert man ein Auswahldropdown in Angular 6 (Filtern nach Suche), wie filtere ich ein Objekt nach seiner Name-Eigenschaft

Ich betreibe eine Angular6-App, ich möchte eine Autovervollständigung implementieren, bei der Daten Objekte sind, die in der Dropdown-Liste angezeigt werden, und sie müssen gefiltert werden, während wir tippen.

**template.html**
  <mat-form-field >
    <input matInput [matAutocomplete]="auto"  [formControl]="customerFilterControl">
       <mat-autocomplete #auto="matAutocomplete" [displayWith] = "displayFn">
         <mat-option *ngFor="let option of (filteredOptions | async)" [value] ="option">
           {{option.name}}
         </mat-option>
       </mat-autocomplete>
   </mat-form-field>

Typescript

import { Observable } from 'rxjs';
import { FormControl } from '@angular/forms';
import { map, startWith } from 'rxjs/operators'; 


export class Component1 implements OnInit {

 objectOptions = [
  { name:'Angular' },
  { name:'Angular Material' },
  { name:'React' },
  { name: 'vue' }
  ];
customerFilterControl = new FormControl();

 ngOnInit() {

  this.filteredOptions = this.customerFilterControl.valueChanges.pipe(
    startWith(''),
    map(value => this._filter(value))
  );

  }

_filter(value:string):string[] {
    const filterValue = value.toLowerCase();
    return this.objectOptions.filter(option => option.toLowerCase().includes(filterValue)); // how do I filter values here
  }

  displayFn(subject) {
    return subject ? subject.name : undefined;  
  }

Hinweis: Ich habe folgende Module in app.module.ts importiert: MatSelectModule, MatAutocompleteModule, MatFormFieldModule, MatInputModule

Es gibt mir einen Fehler, wenn ich versuche, das Objekt nach der Name-Eigenschaft zu filtern

Antwort #1

Es würde helfen, wenn Sie den Fehler angeben würden, den Sie erhalten.

Wenn ich jedoch sage, dass ich den Fehler sehen kann, dann ist es diese Zeile:

this.objectOptions.filter(option => option.toLowerCase().includes(filterValue))

Hier ist option ein Objekt, und Sie versuchen, toLowerCase() aufzurufen. Ich denke, was Sie versuchen wollten, ist:

this.objectOptions.filter(option => option.name.toLowerCase().includes(filterValue))

Bearbeiten Habe gerade den anderen Fehler gesehen, den du bekommst.

_filter(value:string):string[]

Sie deklarieren Ihre Funktion so, dass sie ein Array von Zeichenketten zurückgibt, während Sie tatsächlich ein Array von Objekten mit einer Eigenschaft 'name' zurückgeben. Wenn Sie den Rückgabewert entfernen und TypeScript ihn ableiten lassen, sollten Sie keinen Fehler mehr erhalten. Oder ändern Sie es zu:

_filter(value:string): {name: string}[]

Verwandte Artikel