angulaire 5 matériel 2 - automatique des données api externe
Je suis en utilisant angulaire 5 et matériel 2.
En fichier ts, j'ai cette proeperty:
filteredOptions: Observable<any[]>;
Cette propriété va avoir un tableau de valeurs à afficher dans le champ de saisie semi-automatique.
[{
id:'1', name: 'teste 1'},
{id:'2', name: 'teste 2'},
{id:'3', name: 'teste 3'
}]
Ce tableau de valeurs proviennent de la base de données et qu'il va être montré après le type d'utilisateur quelque chose.
fichier html:
## <form class="example-form">
## <mat-form-field class="example-full-width">
## <input type="text" placeholder="Assignee" aria-label="Assignee" matInput [formControl]="myControl" [matAutocomplete]="auto">
## <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>
## </form>
ts fichier exemple:
this.filteredOptions = Observable<any[]>;
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges
.pipe(
startWith({}),
map(getArrayOfValue(val))
);
}
//it is going to call an api to get the array of values to be shown in the field
getArrayOfValue(val): Observable<any[]> {
const url = this.ROOT_URL + 'veiculo/' + val;
return this.http.get<any[]>(url);
}
Ce code me donne une erreur
ERREUR dans src/app/bureau/cadastro/veiculo/veiculo.composante.ts(55,5):
erreur TS2322: Type 'Observables>" n'est pas cessible
de type 'Observables'. Type 'Observables' est pas
programmables de type' []'.
La propriété 'comprend' est absente de type 'Observables'
Comment fonctionne la réception de vos données? S'il vous plaît copiez collez le JSON réponse à votre question. Vous parlez d'obtenir un objet, mais ce que vous montrez dans votre question est un tableau?
Merci pour votre réponse. - Je changer la question. Je ne sais pas si j'ai été assez clair, mais ce que je veux, c'est à charge de la saisie semi-automatique avec les données qui proviennent de la base de données au lieu d'un objet dans la page.
Merci pour votre réponse. - Je changer la question. Je ne sais pas si j'ai été assez clair, mais ce que je veux, c'est à charge de la saisie semi-automatique avec les données qui proviennent de la base de données au lieu d'un objet dans la page.
OriginalL'auteur andre luis borges de paula | 2017-12-04
Vous devez vous connecter pour publier un commentaire.
Je vois certaines questions, par exemple, vous devez
map(val => this.getArrayOfValue(val))
. Mais je voudrais aussi suggérer quelques modifications supplémentaires. Pensez à ajouterdebounceTime
,distinctUntilChanged
etswitchMap
. Définir un anti-rebond moment de votre choix. Cela, de ne pas complètement la surcharge de l'api. Ainsi que switchMap est utile de faire la demande de commutateurs pour la dernière valeur de l'utilisateur a tapé. En outre, vous devriez envisager d'utiliser un service pour vos demandes d'api, qui est généralement la façon dont nous traitons les choses. Donc je suggère de déplacer le http-request pour le service et l'appeler à partir du composant.TS:
Également vous semblez utiliser
value
pour votre option dans le modèle. Si vous voulez capturer l'ensemble de l'objet, utilisezngValue
.Voici un DÉMO pour vous de jouer avec 🙂
OriginalL'auteur AJT_82