typescript - I Angular, hva betyr *ngFor="let item from list | async"?

Dette brukes i dette kodeeksemplet https://stackblitz.com/angular/jdamnnmgrae?file=app%2Fautocomplete-overview-example.ts.

Kodeutdraget det gjelder er:

<mat-option *ngFor="let state of filteredStates | async" [value]="state.name">

Jeg har ennå ikke sett denne syntaksen, så jeg er forvirret over hva den gjør. Når jeg fjerner det asynkrone kallet, fungerer ikke koden lenger, så jeg trenger å forstå det.

Min oppfatning er at denne koden lager en liste over Observables som blir sendt til async-pipen, men jeg har ikke sett hvor dette er dokumentert i Angulars dokumentasjon. Hvis du vet, vennligst svar.

import {map} from 'rxjs/operators/map';

export class AutocompleteOverviewExample {
// . . . other stuff omitted
  filteredStates: Observable<any[]>;

  constructor() {
    this.filteredStates = this.stateCtrl.valueChanges
    .pipe(
      startWith(''),
      map(state => state ? this.filterStates(state) : this.states.slice())
   );

Så, for-løkken går sannsynligvis gjennom Observables fordi Async-pipen tar en Promise eller Observable, og det er ikke en Promise. :-)

Nyttige lenker:

  • https://angular.io/api/common/AsyncPipe

  • https://angular.io/guide/rx-library - for map, filter

  • https://angular.io/api/forms/FormControl for FormControl.valueChanges

  • https://angular.io/guide/observables

Jeg har ikke vært i stand til å finne ut hvordan pipe brukes fra FormControl.valueChanges, men forhåpentligvis vil dette bli klart når dette spørsmålet blir besvart.

(Q) Kan noen vise meg litt Angular-dokumentasjon som forklarer hva syntaksen «*ngFor | async» betyr? Eller gi en forklaring.

Søk etter svar viste disse resultatene

  • Bruke et array fra Observable Object med ngFor og Async Pipe Angular 2 - Jeg tror spørsmålet jeg har er likt, men jeg leste det svaret, og det var ingen forklaring, bare et kodeeksempel.

  • Bruk async-pipe i ngFor på Observable av Observables (Angular) - Mer syntaks jeg ikke forstår.

  • https://blog.thoughtram.io/angular/2017/02/27/three-things-you-didnt-know-about-the-async-pipe.html - Dette ser ut som svaret på spørsmålet mitt. Men siden jeg har brukt så mye tid på å skrive det, vil jeg fortsatt legge det ut.

Svar #1

Syntaksen let state of filteredStates | async kan betraktes som dette:

let state of (filteredStates | async)

async-pipe brukes på filteredStates-variabelen og ikke på hele for-løkken.

Jeg tror det bør være åpenbart etter å ha sett på alle de andre ressursene du har sett på, men async-pipe er nyttig fordi den vil abonnere på observablen for deg (og i tillegg rydde opp i abonnementet slik at du ikke trenger å bekymre deg for å avslutte abonnementet).

Så det som skjer er at Angular abonnerer på ditt filteredStates observable. Hver gang en ny liste sendes fra ditt observable, vil Angular *ngFor-direktiv gå gjennom den listen som ble sendt.

Uten async-pipen måtte du bare abonnere på din filteredStates-observable i komponenten din og lagre listen som en egenskap på komponenten (som du deretter ville gått gjennom i stedet for filteredStates | async). Merk: Det finnes et par måter å håndtere avslutning av abonnement på, dette er bare én måte.

<mat-option *ngFor="let state of filteredStates" [value]="state.name">

class AutocompleteOverviewExample {
    filteredStates: State[] = [];
    subscription: Subscription = null;

    constructor() {
        this.subscription = this.stateCtrl.valueChanges
        .pipe(
            startWith(''),
            map(state => state ? this.filterStates(state) : this.states.slice())
        )
        .subscribe(states => this.filteredStates = states);
    }

    ngOnDestroy() {
        if (this.subscription) {
            this.subscription.unsubscribe();
            this.subscription = null;
        }
    }
}

Relaterte artikler