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)，这会导致崩溃。我一直试图找到一个如何使用Observables的例子，但我找不到一个足够接近我的场景，以便能够弄清楚如何调整它以解决我的问题。

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

作为一个更清洁的解决方案，我会从您的book-detail组件订阅，例如订阅服务方法getBooksList。

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

Angular2尝试在填充数组之前获取数组中的项

3 个答案: