如何将对象添加到数组的可观察对象中
how to add an object to an observable of array
我有一个 angular 项目,其中包含名为 BookService 的服务。
private books: Subject<Book[]>;
getBookList(skip:number = 0,limit:number = 0): Subject<Book[]> {
return this.books;
}
addBookToList(book:Book) {
}
此服务帮助我监控图书列表的变化,我还希望能够使用 addBookToList 函数将单本书添加到列表中,但我不知道如何通过此可观察对象添加单本书(主体-观察者)
是否可以添加单本书
主题是一种可观察对象。因此,它是一个流。您可以向流中添加一个项目(例如一本书),该项目将广播给流的任何观察者。
但是,它不像普通数组。将项目添加到流并广播后,将无法再在主题 "list" 中访问它。它只能在订阅该主题的组件中访问。
向主题流中添加内容:
this.books.next(book);
这会将其添加到流中并将其广播给所有现有订阅者。
如果您想保留 "cache" 本书,请考虑将您的书定义为一个简单的数组,而不是主题。
这是我的一项服务的示例:
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
}
请注意,我的电影是一个包含我的 "cache" 电影的实际数组。主题设置为单独的 属性.
你可以在这里看到我的完整示例:https://github.com/DeborahK/MovieHunter-communication/tree/master/MH-4
检查 movie.service.ts 和调用它的电影组件。
更新:
另一种选择是使用 BehaviorSubject
来维护您的主题的价值并可以随时引用:
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);
}
请注意,这每次都会将整个书籍数组添加到流中。
我有一个 angular 项目,其中包含名为 BookService 的服务。
private books: Subject<Book[]>;
getBookList(skip:number = 0,limit:number = 0): Subject<Book[]> {
return this.books;
}
addBookToList(book:Book) {
}
此服务帮助我监控图书列表的变化,我还希望能够使用 addBookToList 函数将单本书添加到列表中,但我不知道如何通过此可观察对象添加单本书(主体-观察者) 是否可以添加单本书
主题是一种可观察对象。因此,它是一个流。您可以向流中添加一个项目(例如一本书),该项目将广播给流的任何观察者。
但是,它不像普通数组。将项目添加到流并广播后,将无法再在主题 "list" 中访问它。它只能在订阅该主题的组件中访问。
向主题流中添加内容:
this.books.next(book);
这会将其添加到流中并将其广播给所有现有订阅者。
如果您想保留 "cache" 本书,请考虑将您的书定义为一个简单的数组,而不是主题。
这是我的一项服务的示例:
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
}
请注意,我的电影是一个包含我的 "cache" 电影的实际数组。主题设置为单独的 属性.
你可以在这里看到我的完整示例:https://github.com/DeborahK/MovieHunter-communication/tree/master/MH-4
检查 movie.service.ts 和调用它的电影组件。
更新:
另一种选择是使用 BehaviorSubject
来维护您的主题的价值并可以随时引用:
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);
}
请注意,这每次都会将整个书籍数组添加到流中。