Angular - переменная не обновляется в представлении после изменения ее значения в подписке - PullRequest
Новая
       6

Angular - переменная не обновляется в представлении после изменения ее значения в подписке

0 голосов
/ 26 мая 2020

Если я сделаю что-то вроде этого:

component. html

<input type="button" (click)="emit()">Click to start emitting!</input>
{{decimalNumber | number:'1.1-1'}}

component.ts 

ngOnInit(): void {
 this.myService.decimalNumberEmitter$.subscribe(value => {
   console.log('New value is', value);
   this.decimalNumber = value;
 });
}
emit(){
   this.myService.startEmitting();
}

myService.service.ts 

decimalNumberEmitter$ = new BehaviorSubject<number>(0.0);
startEmitting() {
   for (let index = 1; index < 11; index++) {
    this.decimalNumberEmitter$.next(index / 10);
   }
}

После выполнения предыдущего кода журналы консоли:

Новое значение: 0

Новое значение равно 0,1

...

Новое значение: 1

Однако переменная (decimalNumber) вообще не обновляется. Его значение равно 0,0.

Я пробовал сделать что-то вроде следующего в моем компоненте html, но безуспешно: 

{{this.myService.decimalNumberEmitter$ | async }}

Также я пытался вручную определить изменение, но безуспешно а также - что-то вроде следующего: 

constructor(private cd: ChangeDetectorRef) {}
...
... .subscribe( () => {
       [my code]
       this.cd.markForCheck();
    }

Кто-нибудь может пролить свет на это ?? Заранее благодарим за любую помощь!

Ответы [ 2 ]

1 голос
/ 26 мая 2020

В моем воспроизведении на stackblitz он работает нормально, но я не вижу, в чем разница, ха-ха.

Вот код на всякий случай.

service.ts 

import { Injectable } from "@angular/core";
import { BehaviorSubject } from "rxjs";

@Injectable()
export class MyServiceService {
  decimalNumberEmitter$ = new BehaviorSubject<number>(0.0);

  startEmitting() {
    for (let index = 1; index < 11; index++) {
      this.decimalNumberEmitter$.next(index / 10);
    }
  }
}

component.ts: 

import { Component, OnInit } from "@angular/core";
import { MyServiceService } from "./my-service.service";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  decimalNumber;
  constructor(private _myService: MyServiceService) {}

  ngOnInit() {
    this._myService.decimalNumberEmitter$.subscribe(val => {
      this.decimalNumber = val;
      console.log("decimalNumber = ", this.decimalNumber);
    });
  }

  emit() {
    this._myService.startEmitting();
  }
}

component. html: 

<input type="button" (click)="emit()" value="Click to start emitting!">
{{decimalNumber | number:'1.1-1'}}

Я просто изменил ввод, чтобы он принимал значение (можно было бы сделать его как <button..></button> тоже).

0 голосов
/ 27 мая 2020

попробуйте использовать поток в шаблоне, тогда ngOnInit с this.myService.decimalNumberEmitter$.subscribe вам вообще не нужно. 

<input type="button" (click)="emit()">Click to start emitting!</input>
<ng-container *ngIf="myService.decimalNumberEmitter$ | async as decimalNumber">
  {{decimalNumber | number:'1.1-1'}}
</ng-container>
...