这个问题通常是因为Angular默认使用的是Change Detection策略是Default,它只会在绑定的输入属性(@Input)发生变化时才触发变更检测。当变量在subscribe中的值改变后,视图中的变量没有更新的原因是,该变量没有被Angular视为输入属性。
要解决这个问题,可以采用以下两种方法:
方法一:手动触发变更检测
在subscribe回调函数中手动调用ChangeDetectorRef
的detectChanges()
方法来触发变更检测,从而更新视图中的变量。
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
data: any;
constructor(private cdr: ChangeDetectorRef) { }
ngOnInit() {
this.getData().subscribe((result) => {
this.data = result;
this.cdr.detectChanges(); // 手动触发变更检测
});
}
getData() {
// 返回一个Observable
}
}
方法二:使用AsyncPipe 将Observable直接绑定到模板中,并使用AsyncPipe来自动订阅和取消订阅Observable,并在值发生变化时更新视图中的变量。
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
data$: Observable;
constructor() { }
ngOnInit() {
this.data$ = this.getData();
}
getData(): Observable {
// 返回一个Observable
}
}
{{ data }}
这样,在subscribe中的值改变后,视图中的变量会自动更新。
以上是解决“Angular - 当变量在subscribe中的值改变后,视图中的变量没有更新。”的两种常见方法。根据具体情况选择使用其中一种方法即可。