所以我有这样的场景(简化)
- 主要成分
- 列表组件
- 列表服务
在哪里:
主要成分
<my-list [month]="month"></my-list>
列表组件html
<li *ngFor="let item in list | async></li>
列出组件 ts
list: Observable<ListItem[]>;
@Input() month: string;
...
ngOnInit() {
this.list = this._listService.list;
}
ngOnChanges(changes: SimpleChanges) {
if (changes.month && !!this.month) {
this._listService.getAllByMonth(this.month);
}
}
最后列出服务
private _list: BehaviorSubject<ListItem[]>;
list: Observable<ListItem[]>;
private dataStore: {
list: ListItem[]
};
constructor(private _http: HttpClient) {
this.dataStore = { list: [] };
this._list= <BehaviorSubject<ListItem[]>>new BehaviorSubject([]);
this.list= this._list.asObservable();
}
public getAllByMonth(month: string) {
this._http.get<ListItem[]>(environment.apiPath + 'list/' + month)
.subscribe(
data => {
this.dataStore.list = data;
this._list.next(Object.assign({}, this.dataStore).list);
},
error => console.log('Could not load the list.')
);
}
出于某种原因,getAllByMonth 被调用了很多次......即使我只将月份值更改为 1。
当月份值发生变化时,应该如何安排 getAllByMonth 调用 ONCE 的东西?