在Angular 5中,可以使用RxJS的merge
操作符将新数据与旧数据合并。下面是一个示例解决方法:
首先,创建一个服务来处理数据合并的逻辑。在这个服务中,我们将使用BehaviorSubject
来保存旧数据,并通过next
方法更新它。
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable, merge } from 'rxjs';
@Injectable()
export class DataService {
private data: BehaviorSubject = new BehaviorSubject([]);
getData(): Observable {
return this.data.asObservable();
}
updateData(newData: any[]): void {
const currentData = this.data.getValue();
const mergedData = [...currentData, ...newData];
this.data.next(mergedData);
}
}
在组件中,我们可以订阅getData
方法返回的Observable来获取合并后的数据。
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-root',
template: `
- {{ item }}
`
})
export class AppComponent implements OnInit {
mergedData$: Observable;
constructor(private dataService: DataService) {}
ngOnInit(): void {
this.mergedData$ = this.dataService.getData();
}
}
最后,在需要更新数据的地方,调用updateData
方法来合并新数据与旧数据。
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-data-updater',
template: `
`
})
export class DataUpdaterComponent {
constructor(private dataService: DataService) {}
updateData(): void {
const newData = [1, 2, 3];
this.dataService.updateData(newData);
}
}
通过上述代码,我们可以在AppComponent中显示合并后的数据,并且在DataUpdaterComponent中更新数据。