Question

如何仅使用getUserInfo（）方法中的方法更改服务中的Observable中的值？

@Injectable()
export class UserInfoService {

    public User: UserInfo = {
        firstName: "O",
        lastName: "K",
        email: "ol@op.com",
        country: "uk",
        avatarUrl: null,
        receiveNotifications: true
    }
    private Obser: Observable<UserInfo> = new Observable(observer => {
        observer.next(this.User);

    });
    getUserInfo(): Observable<UserInfo> {
        return this.Obser;
    }
}

使用服务：

openDialog() {
    let subscription = this.UserService.getUserInfo().subscribe(data =>( data=this.data));
    //What should I write here to change the value inside the observable? Please write if it is not difficult
}

Answer 1

使用next()发出后，无法更改该值。根据反应式编程的概念，最好再次使用更改的值调用next()。

Answer 2

您无法更改已发出的数据。您可以再次发出数据。

我认为你需要这样的东西（我没有测试过，只是一个想法）：

import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class MyService {
    userData$: Observable < any > ;

    constructor() {
        this.userData$ = new BehaviorSubject();
    }

    getUserInfoObservable() {
        return this.userData.asObservable();
    }

    updateUserInfo(newData) {
        this.userData.next(newData);
    }
}

以下是如何使用它：

@Component(...)
class MyComponent {
    myData: any;
    constructor(private myService: MyService) {
        myService.getUserInfoObservable().subscribe((newData) => this.myData = newData;
    }
}

如果您想更新数据，请使用myService.updateUserInfo(newData)。

您需要BehaviourSubject，因为您当然希望立即获取当前用户数据。如果你的组件是延迟加载怎么办？您希望获取当前数据及其中的所有新数据。

您还可以按new BehaviorSubject(null)设置BehaviorSubject的初始值。 Null是那里的初始值。

BehaviorSubject是漂亮的rxjs lib的一部分。提供完整的文档，例如here。

Answer 3

Observable正如其名称所示，是一个可以“观察”新数据事件的对象，换句话说就是“订阅”发出的新数据事件。发出数据的不是Observable，而是observer观察新数据并使用next函数发出它。

Observable - 订阅获取新数据的对象。观察者 - 发布新数据的对象。

let observable: Observable<string> = new Observable(observer => {
    observer.next('Hello'); // the observer emit the data
});

observable.subscribe((data) => { // You subscribe to the observable for new data
    console.log(data); // Print 'Hello'
});

如果您希望能够向订阅此观察者的所有订阅者发送新数据，则需要使用其观察者：

let observer;
let observable: Observable<string> = new Observable(o => {
    observer = o;
    observer.next('Hello'); // the observer emit the data
});

observable.subscribe((data) => { // You subscribe to the observable for new data
    console.log(data); // Print 'Hello World!
});

observer.next('World!');

请注意，如果您使用observable确保在更新时使用用户信息更新所有组件，我会向服务添加一个允许发出新值的更新方法。

@Injectable()
export class UserInfoService {

    public user: UserInfo = {
        firstName: "O",
        lastName: "K",
        email: "ol@op.com",
        country: "uk",
        avatarUrl: null,
        receiveNotifications: true
    }
    private observer;
    private observable: Observable<UserInfo>;

    constructor () {
        this.observable = new Observable(o => {
            this.observer = o;
            this.observer.next(user);
        });
    }

    getUserInfo(): Observable<UserInfo> {
        return this.observable;
    }

    updateUserInfo(user: UserInfo) {
        this.user = user;
        this.observer.next(this.user);
    }
}

现在，在对话框组件中，您可以使用服务中的getUserInfo函数来获取您可以订阅的可观察对象以获取用户信息。并使用updateUserInfo进行更新。

角度可观察

3 个答案: