Блог

Я хочу получить результат наблюдаемого, который вычитает значение по умолчанию при каждом изменении значения

Каждый раз, когда значение изменяется, оно вычитает значение по умолчанию на новое значение, введенное в поле ввода

Например, значение по умолчанию равно 5.

Я ввожу 4 в поле ввода

Результат 5-4 = 1, поэтому я хочу отобразить 1 в поле ввода «Площадь поверхности».

Я очищаю поле, затем ввожу 3, результат 5-3 = 2, поэтому я хочу отобразить 2 в поле ввода «Поверхность ha».

И так далее ….

Если я создам консоль.журнал Я могу четко видеть результат наблюдаемого, но я хочу отобразить результат наблюдаемого в том же поле ввода

Я получаю только такой результат ошибки в моей консоли разработчика:

NaN

Вид из окна:

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

Внутри компонента:

     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;
 

Вам нужно присвоить значения, передаваемые наблюдаемым this.surface , а не самой подписке:

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

В качестве альтернативы, вы можете избавиться от subscribe вызова и использовать угловой async канал для привязки непосредственно к наблюдаемому:

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

А затем в вашем шаблоне:

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

Я забыл начать с другого значения по умолчанию!

             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;