angular / angular/components

Angular Material, Autocomplete loading indicator and showing text (no results found)

Ouverte
#18,478 4 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
area: material/autocomplete docs help wanted P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

#### Feature Description

I need to show loading when searching for data and also show text when no record is found.
I have the following html excerpt:
```html

arrow_drop_down






{{
index !== to.filterKeys.length - 1
? value[ky] + ' - '
: value[ky]
}}


{{ value }}


```

Component.ts code:
```javascript
ngOnInit(): void {
super.ngOnInit();

this._unsubscribeAll = new Subject();
this.isLoading = false;

this.result$ = this.formControl.valueChanges.pipe(
takeUntil(this._unsubscribeAll),
debounceTime(300),
startWith(''),
tap(() => {
this.isLoading = true
}),
switchMap(term => this.to.filter(term))
);
}
```

for loading, I would control it with the `tap()` method, but my problem is how to know that the request inside `switchMap(term => this.to.filter(term))` was finished, so I set the loading variable to false?

my second problem is how to show a registration message not found, when the server returns an empty array, because I am working with async.

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par le template Angular fourni et le pipeline valueChanges de ngOnInit, puis consultez la documentation de l’autocomplétion Angular Material et les exemples associés. C’est terminé lorsque l’autocomplétion indique visiblement qu’une recherche est en cours et affiche un message indiquant qu’il n’y a aucun résultat lorsque le résultat asynchrone est vide ; aucun fichier ni test du dépôt n’est nommé.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Fonctionnalité
Difficulté
3/5
Temps estimé
1-2 jours
Activité
Calme
Clarté
À clarifier
Accessibilité débutants
38/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.