[英]Angular - variable not updated in view once its value is changed in subscribe
If I do something like this:如果我做这样的事情:
component.html组件.html
<input type="button" (click)="emit()">Click to start emitting!</input>
{{decimalNumber | number:'1.1-1'}}
component.ts组件.ts
ngOnInit(): void {
this.myService.decimalNumberEmitter$.subscribe(value => {
console.log('New value is', value);
this.decimalNumber = value;
});
}
emit(){
this.myService.startEmitting();
}
myService.service.ts我的服务.service.ts
decimalNumberEmitter$ = new BehaviorSubject<number>(0.0);
startEmitting() {
for (let index = 1; index < 11; index++) {
this.decimalNumberEmitter$.next(index / 10);
}
}
Once the previous code is executed console logs:执行前面的代码后,控制台日志:
New value is 0新值为 0
New value is 0.1新值为 0.1
... ...
New value is 1新值为 1
However variable (decimalNumber) is not getting updated at all.但是变量 (decimalNumber) 根本没有得到更新。 Its value is 0.0.其值为 0.0。
I've tried doing something like following in my component html but with no luck:我尝试在我的组件 html 中执行类似以下操作,但没有运气:
{{this.myService.decimalNumberEmitter$ | async }}
Also I tried manually detecting the change but with no luck as well - something like following:我也尝试手动检测更改,但也没有运气 - 如下所示:
constructor(private cd: ChangeDetectorRef) {}
...
... .subscribe( () => {
[my code]
this.cd.markForCheck();
}
Anyone can shed some light on this??任何人都可以对此有所了解吗? Thanks in advance for any help!提前感谢您的帮助!
On my repro on stackblitz it works fine, but i cannot see what's different haha. 在我对 stackblitz 的复制中,它运行良好,但我看不出有什么不同,哈哈。
Here is the code just in case.这是代码以防万一。
service.ts服务.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:组件.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:组件.html:
<input type="button" (click)="emit()" value="Click to start emitting!">
{{decimalNumber | number:'1.1-1'}}
I just changed the input to take a value (could make it like <button..></button>
as well).我只是将输入更改为取一个值(也可以使它像<button..></button>
一样)。
try to use the stream in the template, then you don't need ngOnInit
with this.myService.decimalNumberEmitter$.subscribe
at all.尝试在模板中使用 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.