angular - Mengembalikan hasil dari observable dengan combineLatest dan Rxjs

Saya ingin mendapatkan hasil dari sebuah observable yang mengurangi nilai default setiap kali nilai berubah

Setiap kali nilainya berubah, itu mengurangi nilai default dengan nilai baru yang dimasukkan ke dalam bidang input

Sebagai contoh, nilai default adalah 5.

Saya memasukkan 4 ke dalam bidang input

Hasilnya adalah 5-4=1 jadi saya ingin menampilkan 1 ke dalam kolom input "Surface ha"

Saya membersihkan kolom kemudian saya memasukkan 3 Hasilnya adalah 5-3=2 jadi saya ingin menampilkan 2 ke dalam kolom input "Luas ha"

Dan begitu begitu ....

Jika saya melakukan console.log saya bisa melihat dengan jelas hasil dari observable tetapi, saya ingin menampilkan hasil dari observable ke dalam bidang input yang sama

Saya hanya mendapatkan jenis hasil kesalahan ini di konsol pengembangan saya:

NaN

Pemandangan:

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

Di dalam komponen:

    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;

Jawaban #1

Anda perlu menetapkan nilai-nilai yang dipancarkan oleh Observable ke this.surface, bukan ke langganan itu sendiri:

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

Sebagai alternatif, Anda dapat menghapus pemanggilan subscribe dan menggunakan pipe async Angular untuk mengikat langsung ke Observable:

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

Dan kemudian di templat Anda:

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

Jawaban #2

Saya lupa memulai dengan nilai default yang berbeda!

            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;