这个问题通常发生在使用异步数据绑定时,因为数组在异步返回后无法自动更新。为了解决这个问题,我们可以使用RxJS的行为主题(BehaviorSubject)来创建一个可绑定的数组对象。这样一来,只需在初始化时调用一次即可正常工作。
以下是一个示例代码:
import { Component, OnInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
interface Person {
name: string;
age: number;
}
@Component({
selector: 'app-person-list',
template: `
{{ person.name }}: {{ person.age }}
`
})
export class PersonListComponent implements OnInit {
private _people = new BehaviorSubject([]);
public get people$() {
return this._people.asObservable();
}
ngOnInit() {
this.fetchPeople();
}
private fetchPeople() {
// Async API call
const people: Person[] = [{ name: 'Alice', age: 30 }, { name: 'Bob', age: 25 }];
this._people.next(people);
}
}
在这个例子中,我们首先引入了RxJS的行为主题,并定义了一个Person接口。在组件中,我们创建了一个私有的行为主题_people,它的类型是Person数组。我们还定义了一个可观察对象people$,它是_people的asObservable()结果。在fetchPeople()方法中,我们通过异步API调用获取了一个Person数组,并将其传递给_people的next()方法来更新数据。最后,在模板中,我们使用ngFor和async管道来遍历people$可观察对象。
通过这个方法,我们可以避免调用数组可观察对象两次的问题,同时确保我们的数据绑定始终是最新的。