Angular - 一旦在订阅中更改其值，变量不会在视图中更新

Question

如果我做这样的事情：

组件.html

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

组件.ts

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

我的服务.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();
    }

任何人都可以对此有所了解吗？ 提前感谢您的帮助！

Answer 1

在我对 stackblitz 的复制中，它运行良好，但我看不出有什么不同，哈哈。

这是代码以防万一。

服务.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);
    }
  }
}

组件.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();
  }
}

组件.html：

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

我只是将输入更改为取一个值（也可以使它像<button..></button>一样）。

Answer 2

尝试在模板中使用 stream ，那么你根本不需要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>