Question

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

user.service

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我能够调用{ {1}}功能并添加更多数据或者是否会覆盖当前的数据？

任何帮助将不胜感激

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

通常Observables和Subject是 streams 数据，而不是数据分配。 BehaviorSubject是不同的，因为它们保留了最后一次发射的值。

通常Subject或BehaviorSubjects在包含的类（如服务）内部不希望公开自己暴露给任何其他类，因此最佳做法是使用{{1}访问其属性或者方法。这使数据流对所有订户都保持冷静。

但是，由于get包含最后一个发射值，因此这里有一些选项。如果所有订阅者需要来自每个发射的连续数据流，您可以访问最后一个发射值并附加到它：

BehaviorSubject

......或者，在可能被视为更好的做法的情况下，此主题的订阅者可以在流上进行自己的转换：

userDataSource = BehaviorSubject<any[]>([]);

userData = this.userDataSource.asObservable();

updateUserData(data) {

    this.userDataSource.next(this.userDataSource.value.push(data));
}

Answer 3

对于可能遇到BehaviorSubject<YourObject[]>这个问题的人。

我发现in this article是一种正确添加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) =>
    ...
    )
}

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

3 个答案: