Angular2试图在数组填充阵列之前将项目放入数组中

Question

我具有如下的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)，这会导致崩溃。我一直在尝试找到一个如何使用可观察到的示例，但是我找不到足够接近的场景以至于能够弄清楚如何调整它来解决我的问题。

Answer 1

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

您也可以在访问数组之前进行解决方法并检查长度。

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

Answer 2

这不会初始化数组，它只是告诉Typescript编译器，该特定属性是此类型的。要实际具有一个数组，而不是undefined，您必须初始化它。这样，filter功能将起作用：

@Injectable()
export class BookService {
    public books: Book[] = [];
    //...
}

Answer 3

作为一种清洁解决方案，我将从您的书籍详细信息组件中订阅，例如服务方法getBookSlist。

使用this.bookservice.getbookslist进行API调用，并且一旦加载阵列，请选择所需的书。