Discussion :

[Adesfire]

Bonsoir,
je cherche a adapter l'exemple officiel d'Angular Material, qui se base sur un tableau d'objets statique, pour prendre pour source le retour d'un httpClient.

Je pense être proche de la solution, mais ce n'est pas encore ça...

Mon HTML ressemble a ca:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)="pushValue()">
    <mat-option *ngFor="let option of filteredoptions | async" [value]="option">
      <span>{{option.label}}</span> |
      <small>{{option.id}}</small>
    </mat-option>
  </mat-autocomplete>

Mon fichier TS a cela:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
...
optionCtrl = new FormControl();
filteredoptions: Observable<any[]>;
 
constructor(private httpClient: HttpClient) {
 
   this.filteredoptions = this.optionCtrl.valueChanges
      .pipe(
        debounceTime(500),
        distinctUntilChanged(),
        tap(value => this.httpSearch(value)
        ),
        startWith(''),
        map(value => typeof value === 'string' ? value : value.label),
        map(option => this.httpClient.get(this.endpointURL + option).subscribe({next: value => {return value}}))
      );
 
}
...

J’essaie donc de retourner le résultat de la méthode httpclient.get la ou dans l'exemple, ils utilisent une fonction de filtrage du tableau d'objets.

J'obtiens l'erreur suivante au niveau de ma variable this.filteredoptions

Type 'Observable<Subscription>' is not assignable to type 'Observable<any[]>'.

J'ai beau tourner le problème dans tous les sens, je ne vois pas comment lui passer le résultat d'HttpCLient qui pourtant, correspond bien à un tableau d'objet quand la chaîne n'est pas vide...

Qu'est ce que je manque

[krakatoa]

la requete dans le map c'est un peu bizarre




sur google tape: angular autocompletion with http
tu trouveras pleins d'exemples

https://www.freakyjolly.com/angular-...erver-results/
https://www.itsolutionstuff.com/post...leexample.html

[Adesfire]

Merci pour ton aide, j'avais vu ces exemples avec d'autres egalement mais cela n'a pas pu m'aider.
En tordant dans tous les sens j'ai fini par trouver hier soir le code qui fonctionne pour moi, je trouve dommage que la doc officielle ne propose pas d'exemple.

Voici le code si cela peut servir à d'autres:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
this.filteredoptions = this.optionCtrl.valueChanges
      .pipe(
        debounceTime(500),
        distinctUntilChanged(),
        startWith(''),
        switchMap(value => value.length > 3? this.httpClient.get(this.endpointURL + value) : [])
      )

Dans ce code, je retourne soit le resutat de la requete httpclient.get, soit un tableau vide. Et le <mat-option *ngFor="let option of filteredoptions | async" [value]="option"> est content avec cela.

[krakatoa]

bien jouez !

la difference entre map et switchMap :

tu avais utilisé map mais faut savoir qu'on utilise map pour faire quelque chose de synchrone (des calculs)
switchMap on l'utilise quand on doit faire quelque chose de asynchrone (comme une requête http)

voilà en gros l'explication !

[Adesfire]

Merci beaucoup pour l'explication, j'avoue que parfois j'y vais souvent a tâtons...