angular - Palauta observablen tulos combineLatestin ja Rxjs:n avulla

Haluan saada havaittavan tuloksen, joka vähentää oletusarvon joka kerta, kun arvo muuttuu

Joka kerta, kun arvo muuttuu, se vähentää oletusarvosta syötetyn uuden arvon syöttökenttään.

Esimerkiksi oletusarvo on 5.

Syötän 4 syöttökenttään

Tulos on 5-4=1, joten haluan näyttää 1 syöttökentässä "Pinta-ala ha"

Tyhjennän kentän, sitten syötän 3. Tulos on 5-3=2, joten haluan näyttää 2 syöttökentässä "Pinta-ala ha"

Ja niin niin ....

Jos teen console.login, näen selvästi havaittavan tuloksen, mutta haluaisin näyttää havaittavan tuloksen samaan syöttökenttään

Saan tämän tyyppisen virhetuloksen vain kehittäjäkonsolissani:

Ei numero

Näkymä:

   <form [formGroup]="credentialsForm" *ngIf="credentialsForm">
    <mat-form-field class="example-full-width">
        <mat-label>Surface Ha</mat-label>
        <input matInput type="number" [value]="surface" placeholder="Libellé" formControlName='surface'>
    </mat-form-field>

    <ion-input  class="form-control" placeholder="Valeur" 
                formControlName="0">
            </ion-input>
   </form>

Komponentin sisällä:

    this.surface = 5;

    const observedValues = ['0']
    .map(key => this.credentialsForm.controls[key].valueChanges.map(value => +value).startWith(0))

    const resSurface = combineLatest(observedValues)
    .pipe(map(([value0]) => { return this.surface - value0 }));
    

    const res = resSurface.subscribe(val => { return val });

   // These line below should display the "res" value
    this.surface = res;

Vastaus #1

Sinun täytyy osoittaa Observablen tuottamat arvot this.surface -muuttujalle, eikä itse tilaukselle:

resSurface.subscribe(val => this.surface = val);

Vaihtoehtoisesti voit poistaa subscribe-kutsun ja käyttää Angularin async-putkea sitomaan suoraan Observablen:

this.resSurface = combineLatest(observedValues)
                    .pipe(map(([value0, value1, value2]) => { return this.surface - (value0 + value1 + value2) }));

Ja sitten mallissasi:

<input matInput type="number" [value]="resSurface | async" placeholder="Libellé" formControlName='surface'>

Vastaus #2

Unohdin aloittaa eri oletusarvolla!

            let defaultValueSurface = 5;

            const observedValues = ['0']
            .map(key => this.credentialsForm.controls[key].valueChanges.map(value => +value).startWith(0))

            const resSurface = combineLatest(observedValues)
            .pipe(map(([value0]) => { return defaultValueSurface - value0 }));
            
        
            const res = resSurface.subscribe(val => { return val });

         
            this.surface = res;