如何将对象添加到可观察数组

时间:2018-08-15 18:46:25

标签: angular angular6 subject-observer

我有一个名为BookService的服务项目。

private books: Subject<Book[]>;

getBookList(skip:number = 0,limit:number = 0): Subject<Book[]> {
  return this.books;
}

addBookToList(book:Book) {
}

此服务可帮助我监视书籍列表中的更改,我还希望能够使用addBookToList函数将单个书籍添加到列表中,但是我不知道如何添加可观察到的单个书籍(主题观察者) 是否可以添加一本书

1 个答案:

答案 0 :(得分:3)

主题是一种可观察的事物。因此,它是一个流。您可以将一个项目(例如一本书)添加到流中,并且该项目将广播给该流的所有观察者。

但是,它不是像普通数组。将项目添加到流中并进行广播后,将不再可以在主题的“列表”中访问该项目。只能在预订该主题的组件中进行访问。

要将某些内容添加到主题的信息流中:

 this.books.next(book);

这会将其添加到流中,并将其广播到所有现有订户。

如果要保留书籍的“缓存”,请考虑将书籍定义为简单数组而不是主题。

以下是我提供的一项服务的示例:

export class MovieService {
  private movies: Movie[];

  private selectedMovieSource = new Subject<Movie | null>();
  selectedMovieChanges$ = this.selectedMovieSource.asObservable();

  constructor(private http: HttpClient) { }

  changeSelectedMovie(selectedMovie: Movie | null): void {
    this.selectedMovieSource.next(selectedMovie);
  }

  // more code here
}

请注意,我的电影是包含我的电影“缓存”的实际数组。主题设置为单独的属性。

您可以在这里看到我的完整示例:https://github.com/DeborahK/MovieHunter-communication/tree/master/MH-4

检出movie.service.ts和调用它的电影组件。

更新:

另一种选择是改为使用BehaviorSubject来维护您的Subject的值,并且可以随时对其进行引用:

private books: BehaviourSubject<Book[]> = new BehaviorSubject<Book[]>([]);

getBookList(skip:number = 0,limit:number = 0): BehaviorSubject<Book[]> {
  return this.books;
}

addBookToList(book:Book) {
  // apply the current value of your books Subject to a local variable
  let myBooks = this.books.getValue();
  // push that book into your copy's array
  myBooks.push(book);
  // apply the local updated array value as your new array of books Subject
  this.books.next(myBooks);
}

请注意,这每次都会将整个书籍数组添加到流中。