angular / angular/components

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

Offen
#18,478 4 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/autocomplete docs help wanted P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

#### 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.

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginnen Sie mit dem bereitgestellten Angular-Template und der valueChanges-Pipeline in ngOnInit und sehen Sie sich anschließend die Dokumentation zur Angular Material autocomplete sowie die zugehörigen Beispiele an. Die Aufgabe ist abgeschlossen, wenn die autocomplete während einer laufenden Suche sichtbar darauf hinweist und eine Meldung zu keinen Ergebnissen anzeigt, wenn das asynchrone Ergebnis leer ist; es wird keine Datei oder kein Test im Repository genannt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Feature
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Ruhig
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
38/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.