将数据添加到行为对象数组 Angular 5 的末尾

Question

我有一些数据想要与我的整个应用程序共享，所以我创建了一个这样的服务。

用户.服务

userDataSource = BehaviorSubject<Array<any>>([]);
userData = this.userDataSource.asObservable();
updateUserData(data) {
this.userDataSource.next(data);
}

然后在我的组件中，我从 api 获取一些数据，然后将该数据发送到userDataSource，如下所示。

constructor(
private: userService: UserService,
private: api: Api
){
}
ngOnInit() {
this.api.getData()
.subscribe((data) => { 
this.userService.updateUserData(data);
})
}

现在一切都有效，但是..我希望能够在userDataSource内数组的末尾添加数据，所以基本上相当于一个.push我是否可以调用updateUserData()函数并添加更多数据，或者这样做会覆盖当前的内容那里？

任何帮助将不胜感激

Answer 1

您可以向服务添加新方法，例如addData可以将以前的数据与新数据(如)组合在一起。

import {Injectable} from '@angular/core';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
@Injectable() 
export class UserService {
userDataSource: BehaviorSubject<Array<any>> = new BehaviorSubject([]);
userData = this.userDataSource.asObservable();
updateUserData(data) {
this.userDataSource.next(data);
}
addData(dataObj) {
const currentValue = this.userDataSource.value;
const updatedValue = [...currentValue, dataObj];
this.userDataSource.next(updatedValue);
}
}

Answer 2

对于可能遇到此问题的人BehaviorSubject<YourObject[]>.

我在本文中找到了一种正确添加新YourObject数组的方法

import { Observable, BehaviorSubject } from 'rxjs';
import { YourObject} from './location';
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class ObjService {
private theObjData: BehaviorSubject<YourObject[]> = new BehaviorSubject<YourObject[]>(null);
constructor() {
}
public SetObjData(newValue: YourObject[]): void {
this.theObjData.next(Object.assign([], newValue));
}
}

如何更新数据：

// inside some component
this.api.userData().subscribe((results:YourObject) => 
this.objService.SetObjData(results);
)

如何观察其他组件的变化

// inside another component
ngOnInit() {
this.objService.GetAccountStatements().subscribe((results) =>
...
)
}

Answer 3

通常，Observables和Subject是数据流，而不是数据赋值。BehaviorSubject是不同的，因为它们保存其最后发出的值。

通常，包含类(如服务)中的Subject或BehaviorSubjects不希望向任何其他类公开自己，因此最佳做法是使用getter 或方法访问其属性。这使数据流对所有订阅者保持冷淡。

但是，由于BehaviorSubject保存最后一个发出的值，因此这里有几个选项。如果所有订阅者都需要来自每个发射的串联数据流，您可以访问最后一个发出的值并附加到它：

userDataSource = BehaviorSubject<any[]>([]);
userData = this.userDataSource.asObservable();
updateUserData(data) {
this.userDataSource.next(this.userDataSource.value.push(data));
}

。或者，在可能被认为是更好的做法中，此主题的订阅者可以在流上进行自己的转换：

this.api.userData()
.scan((prev, current) => prev.push(current). [])
.subscribe((data) => { 
this.concatenatedUserData = data;
});

Answer 4

使用 concat 添加对象

userDataSource = BehaviorSubject<Array<any>>([]);
updateUserData(data) {
this.userDataSource.next(this.userDataSource.value.concat(data));
}

使用过滤器删除对象

removeUserData(data) {
this.userDataSource.next(this.userDataSource.value.filter(obj => obj !== data));
}