该问题通常出现在使用推操作符时,在 API 调用返回数据后,现有值并未保留,而是被覆盖掉了。这是因为推操作符只会添加新值而不会保留之前的值。
解决方法是在推操作符之前先将现有值存储起来,然后再添加新值。这可以通过将现有值存储在本地变量中并将推操作符应用于该变量而不是原始数据来实现。
以下是一个示例,演示如何使用本地变量来保留现有值:
export class Component {
data: any[] = [];
ngOnInit() {
// Call API and get new data
this.http.get('api/data').subscribe((newData) => {
// Store existing data in local variable
const existingData = this.data;
// Apply push operator to local variable
this.data = [...existingData, ...newData];
});
}
}
在这个示例中,原始数据存储在 data
变量中。在调用 API 后,我们将现有数据存储在本地变量 existingData
中。然后我们将推操作符应用于本地变量 existingData
,以便将新的数据添加到其中。最后,我们将更新后的 existingData
存储回原始 data
变量中,以保留现有值并添加新的值。
通过这种方式,我们可以在 API 调用返回数据时保留现有值,并确保不会覆盖先前的数据。