html - Angular-binding oppdateres ikke

Jeg holder for tiden på å lære Angular 2+ og jeg har problemer med å forstå hvordan bindinger fungerer. Jeg har googlet dette i omtrent en halvtime, men har ikke funnet det jeg mangler.

Jeg har en side med en enkel knapp, og teksten på denne knappen er bundet til en egenskap i TypeScript-en min basert på en bool. Når jeg klikker på knappen, skal den snu boolean, men isTrackingText-egenskapen min endres ikke.

Her er knappen min i HTML:

<button ion-button block (click)="startTracking()">{{ isTrackingText }}</button>

Og her er min bool og den bundne tekstegenskapen i min TypeScript

isTracking: boolean = false;
isTrackingText: string = (!this.isTracking ? "Start Tracking" : "Stop Tracking");

Og til slutt den faktiske klikkhendelsen:

startTracking() {
    console.log("Toggle Tracking!");
    this.isTracking = !this.isTracking;
}

Oppdatering: Beklager, jeg burde ha nevnt at jeg vet at jeg bare kan endre det i knapp-klikking-hendelsen min, spørsmålet mitt er mer hvordan jeg kan varsle min isTrackingText om at backing-feltet dens har endret seg.

Svar #1

De andre svarene har alle vist hvordan man manuelt kan synkronisere verdiene, men et annet alternativ ville være å bruke en getter i stedet for et riktig felt:

isTracking: boolean = false;

get isTrackingText(): string {
    return !this.isTracking ? "Start Tracking" : "Stop Tracking";
}

Dette kan fortsatt nås fra malen/annen kode som om det var et felt (dvs. du trenger ikke å kalle det som en funksjon), og malen vil evaluere det på nytt når endringsdeteksjon kjører. Åpenbart har dette litt (og jeg mener veldig lite) overhead sammenlignet med å oppdatere verdien manuelt, men bekvemmeligheten kan gjøre det verdt det.

Alt det sagt, hvis du bare bruker denne logikken på ett sted, vil jeg sterkt vurdere å bare legge den inn i malen selv, siden det bare er presentasjonsmessig. Det er bare meg, da :)

Svar #2

Du kan ikke "varsle" tekst-egenskapen om at den underliggende boolske verdien har blitt endret. Det du kan gjøre er å enten:

  1. «Avbryt» innstillingen av den boolske egenskapen og utløs oppdateringen av tekst-egenskapen.
  2. Definer tekst-egenskapen som en "beregnet" egenskap, som utelukkende avhenger av den boolske.

Begge disse tilnærmingene bruker tilgangsfunksjonsfunksjonen i TypeScript

Den første tilnærmingen vil se slik ut:

private _isTracking: boolean;
get isTracking(){return this._isTracking;}
set isTracking(v: boolean){
  this._isTracking = v;
  this.trackingText = v ? ....; // your logic
}
isTrackingText: string;

constructor(){
  this.isTracking = false;
}

Som du kan se, er dette litt omstendelig.

Den andre tilnærmingen er mye renere etter min mening:

isTracking = false;
get trackingText(){
  return this.isTracking ? ....; //your logic;
}

Merk at i denne tilnærmingen, slik den er, hver gang du "tilgår" trackingText-medlemmet, blir verdien beregnet på nytt. Så hvis beregningen er CPU-intensiv, er dette ikke en optimal tilnærming.

Relaterte artikler