Question

我正在尝试使用HttpClient和[（ngModel）]伪指令从Angular应用向nestJS服务器发出发布请求。提交表单时，出现以下错误：

AppComponent.html:34 ERROR TypeError: Cannot read property 'id' of undefined
    at AppComponent.addBook (app.component.ts:21)
    at Object.eval [as handleEvent] (AppComponent.html:34)
    at handleEvent (core.js:38098)
    at callWithDebugContext (core.js:39716)
    at Object.debugHandleEvent [as handleEvent] (core.js:39352)
    at dispatchEvent (core.js:25818)
    at core.js:37030
    at HTMLButtonElement.<anonymous> (platform-browser.js:1789)
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:34182)

这是component.html文件，它使用未定义变量的'id'属性，该变量实际上应该是books对象：

//app.component.html

<form class="" action="addBook()" method="post">
  <div class="form-group">


    <label for="id">Book ID:</label>
    <input id="id" name="bookID" type="text" [(ngModel)]="id" class="form-control">

    <label for="title">Book Title:</label>
    <input id="title" name="bookTitle" type="text" [(ngModel)]="title" class="form-control">

    <label for="description">Book Description:</label>
    <input id="description" name="bookDescription" type="text" [(ngModel)]="description" class="form-control">

    <label for="author">Book Author:</label>
    <input id="author" name="bookAuthor" type="text" [(ngModel)]="author" class="form-control">
    <button type="submit" name="button" (click)="addBook()">add</button>
  </div>
</form>

[（ngModel）]指令中使用的所有属性都属于一个书对象，该对象在app.component.ts文件中定义：

//app.component.ts

import { Component } from '@angular/core';
import { ApiService } from './api.service';
import { Book } from './book';
@Component({

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  book: Book;
  constructor(private apiService: ApiService){}
    library = {};
ngOnInit(){
}
    getBooks() {
      this.apiService.getBooks().subscribe(data => this.library = data);
    };
    addBook(){
       let book = {
        id: this.book.id,
        title: this.book.title,
        description: this.book.description,
        author: this.book.author
      }
      this.apiService.addBook(book).subscribe(
        success => alert("Done"),
        error => alert(error)
      )
    }

    clearview() {
      this.library = {}
    };

}

此book对象的类型为Book，它是一个类似于以下内容的类：

export class Book{
  id: Number;
  title: string;
  description: string;
  author: string;
}

很抱歉，如果我将其设置的时间超出所需的时间，我想提供完整的上下文信息，因为我尝试了许多不同的方法来修复此错误。

Answer 1

将app.component.html更改为此：

<form class="" action="addBook()" method="post">
  <div class="form-group">


    <label for="id">Book ID:</label>
    <input id="id" name="bookID" type="text" [(ngModel)]="book.id" class="form-control">

    <label for="title">Book Title:</label>
    <input id="title" name="bookTitle" type="text" [(ngModel)]="book.title" class="form-control">

    <label for="description">Book Description:</label>
    <input id="description" name="bookDescription" type="text" [(ngModel)]="book.description" class="form-control">

    <label for="author">Book Author:</label>
    <input id="author" name="bookAuthor" type="text" [(ngModel)]="book.author" class="form-control">
    <button type="submit" name="button" (click)="addBook()">add</button>
  </div>
</form>

进一步了解

NgModel

Answer 2

对于您来说， this.book 是不确定的。您无法从 id 读取诸如 title ， undefined ...等属性。这就是此错误的原因。请执行以下操作。

TS

export class AppComponent {
  book: Book = {};
  constructor(...){}
  ...
    addBook(){
       let book = {
        id: this.book.id,
        title: this.book.title,
        description: this.book.description,
        author: this.book.author
      }
      ...
    }
    ...
}

HTML

<form class="" action="addBook()" method="post">
  <div class="form-group">


    <label for="id">Book ID:</label>
    <input id="id" name="bookID" type="text" [(ngModel)]="book.id" class="form-control">

    <label for="title">Book Title:</label>
    <input id="title" name="bookTitle" type="text" [(ngModel)]="book.title" class="form-control">

    <label for="description">Book Description:</label>
    <input id="description" name="bookDescription" type="text" [(ngModel)]="book.description" class="form-control">

    <label for="author">Book Author:</label>
    <input id="author" name="bookAuthor" type="text" [(ngModel)]="book.author" class="form-control">
    <button type="submit" name="button" (click)="addBook()">add</button>
  </div>
</form>

错误TypeError：无法读取未定义的属性'id'（AppComponent.html：34）

2 个答案: