使用Angular的ChangeDetectorRef强制更新视图

在使用Angular中，如果在 .subscribe() 中更新数据时，数据没有更新视图，可以通过使用ChangeDetectorRef来强制更新视图来解决此问题。

在组件的构造函数中注入ChangeDetectorRef，然后在 .subscribe() 中使用 .detectChanges() 方法来强制更新视图。

例如：

import { Component, OnInit, ChangeDetectorRef } from '@angular/core'; import { DataService } from '../data.service';

@Component({ selector: 'app-my-component', templateUrl: './my-component.component.html', styleUrls: ['./my-component.component.css'] }) export class MyComponent implements OnInit {

data: any[];

constructor(private dataService: DataService, private cdr: ChangeDetectorRef) { }

ngOnInit(): void { this.dataService.getData().subscribe((res: any) => { this.data = res; this.cdr.detectChanges(); // 强制更新视图 }); }

}

这样，当数据更新时，视图也会相应地更新。