一种常见的解决方法是,在组件中使用 ChangeDetectorRef。ChangeDetectorRef 是 Angular 提供的一个服务,用于检测组件和子组件的变化并进行更新。
示例代码如下:
在组件中引入 ChangeDetectorRef:
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
@Component({ selector: 'app-my-component', templateUrl: './my-component.component.html' }) export class MyComponent {
// 声明一个数组成员
public myList:Array
constructor(private cdRef:ChangeDetectorRef) {}
// 在组件的某个方法中更新数组成员 updateList() { this.myList.push({ id: 1, name: 'my item' });
// 手动调用 ChangeDetectorRef 来更新视图
this.cdRef.detectChanges();
} }
在上面的示例代码中,我们使用 ChangeDetectorRef 来手动检测并更新视图。当调用 updateList 方法时,数组成员将被更新,然后手动调用 cdRef.detectChanges() 来更新视图。
这样就可以确保数组或 Observable 在更新后自动更新视图,并避免了视图无法实时更新的问题。