Angular 2 Observables 不能分配给布尔值答案

【问题标题】：Angular 2 Observables cannot assign to booleanAngular 2 Observables 不能分配给布尔值
【发布时间】：2016-12-22 06:51:54
【问题描述】：

我正在尝试使用 Angular 2 中的 Observables 来观察对名为 loggedIn 的布尔值的简单更改，该布尔值可以为真或假。我在 TS 中收到此错误。

类型“布尔”不能分配给“主题”类型。类型 'boolean' 不能分配给类型 'Observable'。

谁能提供替代方案或告诉我我做错了什么？

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import {Subject} from "../../node_modules/rxjs/src/Subject";
import {Observable} from "../../node_modules/rxjs/src/Observable";


@Injectable()
export class UserService {

  user: Subject<any>;
  user$: Observable<any>;
  //loggedIn: Subject<any>;
  //loggedIn$: Observable<any>;
  loggedIn: boolean;

  constructor(private http: Http) {
    this.user = new Subject();
    this.user$ = this.user.asObservable();
    this.loggedIn = false;
    //this.loggedIn = new Subject();
    //this.loggedIn$ = this.user.asObservable();


  }

  createAccount(user) {
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');



    return this.http
      .post(
        '/api/accounts',
        JSON.stringify(user),
        { headers }
      )
      .map(res => res.json())
      .map((res) => {
        if (res['success']) {
          localStorage.setItem('auth_token', res['auth_token']);
          //this.loggedIn$ = true;
          //this.loggedIn.next(true);
        }

        return res['success'];
      });
  }

  login(user) {
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');

    return this.http
      .post(
        '/api/authenticate',
        JSON.stringify(user),
        { headers }
      )
      .map(res => res.json())
      .map((res) => {
        console.log('Login Result:', res.user);
        if (res["success"]) {
          localStorage.setItem('jwt', res.token);
          //set user service info...
          //this.user.next(res.user[0]);
          //this.loggedIn.next(true);
        }
        return res;
      });
  }

  updateAccount(user) {
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('x-access-token', localStorage.getItem('jwt'));

    console.log('PAYLOAD FOR UPDATE USER: ' , user);

    return this.http
      .put(
        '/api/accounts/' + user._id,
        JSON.stringify(user),
        { headers }
      )
      .map(res => res.json())
      .map((res) => {
        if (res['success']) {
          localStorage.setItem('auth_token', res['auth_token']);
          //this.loggedIn$ = true;
          //this.loggedIn.next(true);
        }

        return res['success'];
      });
  }

  logout() {
    localStorage.removeItem('auth_token');
    //this.loggedIn$ = false;
    //this.loggedIn.next(false);
  }

}

请查看被注释掉的行。我需要订阅 Observable，它会随时返回 true 或 false。

【问题讨论】：

见stackoverflow.com/questions/37089977/… 的例子。您需要使用next() 而不是赋值。
我能够根据 Mark 的参考解决这个问题。登录 = 新主题();登录$：可观察的；那么：this.loggedIn.next(false);

标签： angular typescript

【解决方案1】：

使用主题来发出值。如果您想在订阅时发出状态但不想要初始状态，请使用 private loggedIn: ReplaySubject<boolean> new ReplaySubject(1);。如果你想要一个初始状态，请使用private loggedIn: BehaviorSubject<boolean> = new BehaviorSubject(false);。

不要将主题显示为公共属性 - 仅公开可观察对象，即 loggedIn$: Observable<boolean> = this.loggedIn.asObservable();。服务的消费者应该只能通过公共方法以受控方式改变状态。

这些是您的服务中与登录状态有关的一些部分。

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, ReplaySubject } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class UserService {
  private readonly loggedIn: ReplaySubject<boolean> = new ReplaySubject(1);

  readonly loggedIn$: Observable<boolean> = this.loggedIn.asObservable();

  constructor(private readonly http: HttpClient) {}

  login(user): Promise<any> {
    return this.http
      .post(/* (...) */)
      .map((res) => {
        if (res["success"]) {
          this.loggedIn.next(true);
        }
      });
  }

  logout(): void {
    this.loggedIn.next(false);
  }
}

因此，我们将状态公开为公共loggedIn$ 属性中的Observable<boolean>，它只是私有loggedIn 主题属性的Observable 接口。通过向loggedIn 发送一个值来更改状态，loggedIn$ 的订阅者会观察到该值。

【讨论】：