错误类型: 类型错误(TypeError) - 无法读取未定义对象的属性(reading 'title')

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

书籍模型.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>

- abdulraheem alarpi

Answer 1

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

serive.book 属性未被定义，需要进行初始化才能使用。在您的服务中可以通过以下方式初始化 book 属性：

book: Book = new Book();

- Amer

---

非常感谢，它有效了。但是我遇到了一个问题：(:31451/api/books:1 Failed to load resource: the server responded with a status of 400 (Bad Request))。 - abdulraheem alarpi

这个错误来自于你的服务器，请检查期望的请求体或查询字符串，以确定问题出在哪里。 - Amer

在同一个项目中，我需要进行获取和提交数据的操作。获取数据的功能已经正常运行，但是当我尝试将表单中的数据提交到数据库时，出现了问题。请问您能告诉我如何解决这个问题吗？ - abdulraheem alarpi

你需要检查终端预期参数是否与你的请求参数相同。祝你好运！ - Amer

您可以像这样检查input标签内的所有属性：*ngIf="service.book.title" - 2apreety18

Answer 2

将表单包裹在以下*ngIf中：

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

  <form ... etc>

</ng-container>

或者使用操作符：

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

同时也要对作者等进行相同的操作。

- danday74

---

在第一种方法中，表格消失了，但在第二种方法中，它不起作用。 - abdulraheem alarpi

这意味着service.book未设置 - 如果已设置，则表格将显示。 - danday74

Answer 3

我几乎一模一样的错误是：

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

我发现我的.component.html渲染比我的.component.ts中的Promise / Subscription返回更快。由于“背景图像”“游戏”的父对象是一个对象，因此在渲染HTML之前我测试了typeof 'object' ：

在我的.component.ts中，我添加了这个函数：

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

在我的.components.html文件中，我添加了这个*ngIf语句包装器来包含所有的HTML代码：

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

• 如果你的'undefined'值是一个'string'、'number'、'boolean'等类型，你可以使用同样的函数，只需改变它寻找的typeof。
• 我采用这种策略的原因是，在模板中无法使用全局变量如window、typeof、enums或静态方法。只有组件类的成员和TypeScript语言结构可用。

- totallytotallyamazing