角度，标题是未定义的错误

Question

我有一个平均堆栈应用程序的以下文件。 服务器端从 MongoDB 返回完美的有效数据。

book.ts

export class Book {
    isbn: string;
    title: string;
    author: string;
    publisher: string;
    price: number;
    update_date: Date;
}

book.service.ts

在这个文件里面，我有如下方法

 showBook(id): Promise<Book> {
        return this.http.get('/book/' + id)
            .toPromise()
            .then(response => response.json() as Book)
            .catch(this.handleError);
    }

还有一个组件文件

book-detail.component.ts

ngOnInit() {
    this.getBookDetail(this.route.snapshot.params['id']);
}

// id is passed on via a router.navigate and it is a valid id

getBookDetail(id): void {
    console.log('ekgnjk');
    this.bookService.showBook(id)
        .then(res => {
            console.log(res);
            this.book = res;
        }, (err) => {
            console.log(err);
        });
}

book-detail.component.html

<div class="container">
    <h1>{{book.title}}</h1>
    <dl class="list">
        <dt>ISBN</dt>
        <dd>{{book.isbn}}</dd>
        <dt>Title</dt>
        <dd>{{book.title}}</dd>
        <dt>Author</dt>
        <dd>{{book.author}}</dd>
        <dt>Publisher</dt>
        <dd>{{book.publisher}}</dd>
        <dt>Price</dt>
        <dd>{{book.price}}</dd>
        <dt>Last Updated</dt>
        <dd>{{book.updated_at}}</dd>
    </dl>
    <div class="row">
        <div class="col-md-12">
            <a [routerLink]="['/books']" class="btn btn-success">Home</a>
        </div>
    </div>
</div>

我的问题是，当我运行这个应用程序时，我收到以下错误。

无法读取未定义的属性标题。

Title 是唯一显示此错误的属性。 所有其他属性返回有效数据。 同样在视图中，我可以看到我的 title 属性。 但是在终端中，我看到了上述错误。

但是当我将服务代码更改为以下时，

book.service.ts

  showBook(id): Promise<any> {
        return this.http.get('/book/' + id)
            .toPromise()
            .then(response => response.json())
            .catch(this.handleError);
    }

我的应用程序没有显示任何错误。

为什么会这样？以及为什么其他属性没有显示错误。

我的 MongoDB 架构如下图所示；

var mongoose = require('mongoose');

var BookSchema = new mongoose.Schema({
    isbn: String,
    title: String,
    author: String,
    publisher: String,
    price: Number,
    update_date: {
        type: Date,
        default: Date.now
    }
});

module.exports = mongoose.model('Book', BookSchema);

Answer 1

如果返回值不包含标题，

response.json() as Book

不会导致它被添加。

您可以使用安全导航运算符来避免出错

<h1>{{book?.title}}</h1>

Answer 2

当视图是initialized 并试图显示你的数据绑定时，你还没有拿到你的书，服务器调用异步工作，它等到调用返回，JS 线程将完成它的工作然后调用事件循环中的then 函数将值分配给您的书。此时（在上述工作期间）您的book 在undefined。所以当它想要访问book 上的属性title 并且因为book 是未定义的，它会抛出错误

无法读取未定义的属性标题

您可以在视图中使用? 安全检查运算符或初始化您的变量book。

<h1>{{book?.title}}</h1> 或 this.book = new Book()；带有适当的参数。