angular - Hvordan undertrykker jeg at ngModelChange utløses når komponenten blir opprettet (og dermed) fyller mine input-felt med eksisterende data?

Det grunnleggende premisset for problemet er som følger:

Jeg har en komponent med forskjellige (tilpassede) inputter. Når noen av disse inputverdiene endres, gjør jeg et HTTP-kall til et API-endepunkt for å beregne på nytt hva min målgruppetilgang er, altså det er et kampanjesystem, og når brukeren definerer målgruppens demografi, endres målgruppens 'reach'.

Jeg utløser kallet ved å bruke ngModelChanges, og dette fungerer veldig bra.

Problemet mitt er imidlertid at når komponenten lastes med eksisterende data (fra en tidligere lagring), fyller den inn feltene som får ngModelChange til å utløse, noe som igjen får HTTP-anropet mitt til å kjøre flere ganger ved innlasting av siden.

Eksempel på HTML:

<app-custom-input
        id="age-from"
        name="age-from"
        [(ngModel)]="audienceModel.ageFrom"
        [type]="'number'"
        (ngModelChange)="calcReach()"
></app-custom-input>
<app-custom-input
        id="age-to"
        name="age-to"
        [(ngModel)]="audienceModel.ageTo"
        [type]="'number'"
        (ngModelChange)="calcReach()"
></app-custom-input>

Merk: mine tilpassede input-felter implementerer ControlValueAccessor

.ts-fil:

calcReach() {
    if (!this.loading$.getValue()) {
      const filters = {
        ...this.audienceModel,
        audienceFileId: this.campaignService.campaign.audienceFileId
      };
      this.calcAudienceReach$ = this.campaignService.calcAudienceReach(filters).subscribe((reach: number) => {
        console.log('calc audience reach: ', reach);
      });
    }
  }

Som man kan se, prøvde jeg å bruke en lastindikator som jeg satte til false på slutten av min ngOnInit(), men anropene som utløses av ngModelChange skjer alle etter (eller før?) OnInit.

Jeg har en abstrakt komponent som komponenten min implementerer, der lastindikatoren er definert som:

public loading$: BehaviorSubject<boolean> = new BehaviorSubject(true);

dvs. det settes opp med en initial verdi på true (i den abstrakte komponenten) og endres bare til false på slutten av ngOnInit (i den faktiske komponenten).

Relaterte artikler