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);
    }

和组件文件

图书-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);
        });
}

图书-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>

我的问题是，当我运行此应用时，我收到以下错误。

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

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

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

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 Thread将完成其工作，然后从事件循环中调用then函数，以将值分配给您的图书。目前（在上述工作期间）book位于undefined。因此，当它想要访问title上的属性book并且因为book未定义时，它会抛出错误

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

您可以在视图中使用?安全检查操作符，也可以初始化变量book。

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

angular，title is undefined error

2 个答案: