服务不会使用BehaviorSubject

问题描述

我有一个JSON数据，如下所示：

import { Person } from './models';

export const People = [
  {
    name: 'Kimberly',lastname: 'Garcia',age: 26,sex: 'F',},{
    name: 'Chris',lastname: 'Williams',age: 64,sex: 'M',] as Person[];

我有一个服务，该服务在ngOnInit挂钩期间发出数据，如下所示：

import { Injectable } from "@angular/core";
import { BehaviorSubject,Observable } from "rxjs";
import { People } from "./data.json";
import { Person } from "./models";

@Injectable()
export class AppService {
  people$: Observable<Person[]>;
  private _people$: BehaviorSubject<Person[]>;

  constructor() {}

  ngOnInit() {
    this.setPeople();
  }

  getPeople() {
    //Get People list as observable. Please use BehaviorSubject for that.
    this.people$ = this._people$.asObservable();
  }

  setPeople() {
    this._people$.next(People);
  }
}

我正在将数据读取到可观察的组件中

import { Component } from "@angular/core";
import { Observable } from "rxjs";
import { AppService } from "./app.service";
import { Person } from "./models";

@Component({
  selector: "app-root",templateUrl: "./app.component.html",styleUrls: ["./app.component.scss"],})
export class AppComponent {
  title = "interview";
  people$: Observable<Person[]>;

  constructor(private service: AppService) {}

  ngOnInit() {
    this.people$ = this.service.people$;
  }
}

我正在模板中显示数据

<h1>{{ title }}</h1>
<ul>
  <li *ngFor="let person of people$ | async">
    {{ person.name }}
  </li>
</ul>

我不明白为什么我看不到JSON中的任何数据。我将它们添加到ngOnInit钩子中的BehaviorSubject中。怎么了？我也没有在浏览器的控制台中看到任何错误。我找不到解决方案-我必须使用BehaviorSubject。

解决方法

尝试使用_people$更新new以创建BehaviorSubject的实例：

import { Injectable } from "@angular/core";
import { BehaviorSubject,Observable } from "rxjs";
import { People } from "./data.json";
import { Person } from "./models";

@Injectable()
export class AppService {
  // initialize with empty array for ngFor safety
  private _people$: BehaviorSubject<Person[]> = new BehaviorSubject<Person[]>([]);
  // this can still be in getPeople if you prefer
  people$: Observable<Person[]> = this._people$.asObservable();

  constructor() {
     this.setPeople();
  }

  setPeople() {
    this._people$.next(People);
  }
}

设置this.people$时组件中的其他几个问题是，this.service.people$的值实际上是未定义/为空，因为没有首先调用getPeople()。您可以通过更新getPeople()来返回服务的实际可观察people$来避免这种情况，或者在实例化诸如people$之类的行为主体之后直接设置people$: Observable<Person[]> = this._people$.asObservable();。

angular behaviorsubject html