错误类型错误：无法读取未定义的属性(读取"标题")

Question

你能告诉我如何解决这个问题吗?

浏览器出现问题:

core.js:6479 ERROR TypeError: Cannot read properties of undefined (reading 'title')
at BookItemComponent_Template (book-item.component.html:4)
at executeTemplate (core.js:9599)
at refreshView (core.js:9465)
at refreshComponent (core.js:10636)
at refreshChildComponents (core.js:9261)
at refreshView (core.js:9515)
at refreshComponent (core.js:10636)
at refreshChildComponents (core.js:9261)
at refreshView (core.js:9515)
at renderComponentOrTemplate (core.js:9579)

book.service.ts:

import { Injectable } from '@angular/core';
import { Book } from './book.model';
import { HttpClient} from '@angular/common/http';

@Injectable({
providedIn: 'root'
})
export class BookService {

url:string="http://localhost:31451/api/books"

books:Book[];
book:Book;

constructor(private http:HttpClient) { }
getAllbooks (){
this.http.get(this.url).toPromise().then(
res=>{
this.books =res as Book[];
}
)
}
postbook(){
return  this.http.post(this.url, this.book); 

// {headers: new HttpHeaders({'content-type':'application/json'})}


}
}

book.model.ts:

export class Book {
id:number;
title:string;
author:string;
numberOfPages:number;
publishedAt:Date;
}

book-item.component.ts:

import { Component, OnInit } from '@angular/core';
import { BookService } from '../book.service';
import { NgForm } from '@angular/forms';

@Component({
selector: 'app-book-item',
templateUrl: './book-item.component.html',
styleUrls: ['./book-item.component.css']
})
export class BookItemComponent implements OnInit {

constructor(public service:BookService) { }

ngOnInit(): void {}

submit() {
this.service.postbook().subscribe(res=>{
this.service.getAllbooks()
},
err=>{
console.log(err)
})
}}

book-item.component.html:

表单添加数据

<form  ngForm="form" (submit)="submit()"  >
<div class="form-group">
<label for="title">Title:</label>
<input type="text" [(ngModel)]="service.book.title"  name="title" class="form-control">
</div>
<div class="form-group">
<label for="Author">Author:</label>
<input type="text" [(ngModel)]="service.book.author"  name="author" class="form-control">
</div>
<div class="form-group">
<label for="numberOfPages">Number Of Pages:</label>
<input type="text" [(ngModel)]="service.book.numberOfPages" name="numberOfPages" class="form-control">
</div>
<div class="form-group">
<label for="publishedAt">published At:</label>
<input type="text" [(ngModel)]="service.book.publishedAt" name="publishedAt" class="form-control">
</div>
<input type="submit" class="btn btn-dark btn-lg" value="save book" >
</form>

Answer 1

serive.book属性是undefined，因为它没有初始值。因此，在您的服务中，只需像下面这样初始化book属性:

book: Book = new Book();

Answer 2

在*ngIf中包装表单，如下所示:

<ng-container *ngIf="service.book">
<form ... etc>
</ng-container>

或者使用操作符:

[(ngModel)]="service.book?.title"

作者等也一样

Answer 3

我几乎完全相同的错误是:

ERROR TypeError: Cannot read properties of undefined (reading 'background_image')

我发现my.component.html的呈现速度比my.component.ts中的promise/subscription的返回速度要快。由于"background_image"的父元素，"game"是一个对象，在像这样渲染html之前，我测试了'object'的类型:

在my.component.ts中，我添加了这个函数:

isObject(value: any): boolean { return typeof value === 'object'; }

在my.components.html中，我在所有html代码中添加了*ngIf语句包装器:

<ng-container *ngIf="isObject(game)">
<div>
...
</div>
</ng-container>

• 如果你的'undefined'值是'string'， 'number'， 'boolean '等，你可以使用相同的函数，只是改变它寻找的类型。
• 我之所以采用这种策略，是因为全局变量如window、typeof、enum或静态方法在模板中是不可用的。只有组件类的成员和typescript语言的构造是可用的。