0

我有一个Angular2服务如下。我正在尝试将其用作多个组件之间的共享服务。如果重要，组件直接绑定到public books，selectedBook properties我想在服务上缓存书籍列表和当前选择的书籍，并且只在第一次调用时调用填充这些。

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';

@Injectable()
export class BookService {

    public books: Book[];
    public selectedBook: Book;

    constructor(private http: Http,
        private router: Router) {

        this.http.get('/api/book/list')
            .subscribe(result => this.books = result.json() as Book[]);
    }

    public getBooks() {
        return this.books;
    }

    public setSelectedBook(id) {
        this.selectedBook = this.books.filter(x => x.id == id)[0];
    }
}

问题是有时我试图在setSelecteBook(id)实际填充数组之前读取数组或调用，这会导致崩溃。我一直在尝试找到一个如何使用 Observables 的示例，但我找不到足够接近我的场景来弄清楚如何调整它来解决我的问题。

4

3 回答 3

2

您可以在构造函数中使用空数组初始化数组书籍。

您还可以在访问数组之前做一个解决方法并检查长度。

public setSelectedBook(id) {
    if(this.books.length > 0) {
        this.selectedBook = this.books.filter(x => x.id == id)[0];
    }
}
于 2017-03-08T14:30:25.853 回答
0

作为一个更简洁的解决方案，我会从您的书籍详细信息组件中订阅服务方法 getBooksList。

使用 this.bookService.getBooksList 进行 api 调用，并在加载数组后立即选择所需的书。

于 2017-03-08T15:10:01.373 回答
0

这不会初始化一个数组，它只是告诉 TypeScript 编译器这个特定的属性属于这种类型。要真正拥有一个数组，而不是undefined，您必须对其进行初始化。这样该filter功能将起作用：

@Injectable()
export class BookService {

    public books: Book[] = [];
    //...
}
于 2017-03-08T14:27:41.370 回答