web-dev-qa-db-fra.com

Angular la saisie semi-automatique du matériau ne fonctionne pas, aucune erreur affichée

J'ai implémenté ma saisie semi-automatique, aucune erreur, tout semble correct mais absolument rien ne se passe. J'entre quelque chose dans le champ de saisie et aucune action ne semble se produire, rien ne s'affiche dans la console.

HTML

  <form>
    <mat-form-field>
      <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
    </mat-form-field>

    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let n of testValues" [value]="n">
        {{n}}
      </mat-option>
    </mat-autocomplete>
  </form>

TS

import { MatAutocomplete } from '@angular/material/autocomplete';
import { FormControl } from '@angular/forms';
...
public testValues = ['one', 'two', 'three', 'four'];
public myControl: FormControl;
...
constructor() {
    this.myControl = new FormControl();
}

EDIT: j'ai importé

import {MatAutocompleteModule} from '@angular/material/autocomplete';

dans mon module d'application.

Version du matériel -

"@angular/material": "^5.0.0-rc.2",
angulartypescriptautocompleteangular-materialangular-material2
7
Simeon Nakov

Il manque une méthode de filtrage dans votre .ts

Vous devez vous abonner à votre myControlvalueChanges de cette façon:

this.myControl.valueChanges.subscribe(newValue=>{
    this.filteredValues = this.filterValues(newValue);
})

Ainsi, chaque fois que la valeur de votre contrôle de formulaire change, vous appelez votre méthode filterValues() personnalisée, qui devrait ressembler à ceci:

filterValues(search: string) {
    return this.testValues.filter(value=>
    value.toLowerCase().indexOf(search.toLowerCase()) === 0);
}

Vous utilisez donc votre tableau testValues comme tableau de base et votre tableau filteredValues dans votre html:

<mat-option *ngFor="let n of filteredValues" [value]="n">
    {{n}}
</mat-option>

Le filtrage n'est pas automatique, vous devez utiliser votre méthode personnalisée pour filtrer les options. J'espère que cela aide

10
Gianluca Paris