在Angular 9中,可以使用ChangeDetectorRef类来手动触发变更检测,从而重新渲染ngFor。
首先,在组件中导入ChangeDetectorRef类,并注入到构造函数中:
import { Component, ChangeDetectorRef } from '@angular/core';
@Component({
...
})
export class YourComponent {
constructor(private cdr: ChangeDetectorRef) { }
}
然后,在需要重新渲染ngFor的地方,使用ChangeDetectorRef的detectChanges()方法:
updateObjectProperties() {
// 更新对象属性
// ...
// 手动触发变更检测
this.cdr.detectChanges();
}
这将会重新渲染ngFor,以反映对象属性的更新。
下面是一个完整的示例:
import { Component, ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'app-your-component',
template: `
{{ item }}
`
})
export class YourComponent {
items: string[] = ['Item 1', 'Item 2', 'Item 3'];
constructor(private cdr: ChangeDetectorRef) { }
updateObjectProperties() {
// 模拟更新对象属性
this.items.push('New Item');
// 手动触发变更检测
this.cdr.detectChanges();
}
}
在上面的示例中,当点击按钮时,将向数组中添加一个新项,并通过手动调用detectChanges()方法来重新渲染ngFor。