时间戳

首页 > 解决方案 > 错误类型错误：无法读取未定义的属性“id”（AppComponent.html:34）

node.js - 错误类型错误：无法读取未定义的属性“id”（AppComponent.html:34）

问题描述

我正在尝试nestJS使用表单中的 HttpClient 和 [(ngModel)] 指令从 Angular 应用程序向服务器发出发布请求。当我提交表单时，我收到以下错误：

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”属性的文件，它应该是真正的书籍对象：

//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 类型，它是一个如下所示的类：

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

抱歉，如果我把它弄得比需要的长，我想给出完整的上下文，因为我已经尝试了许多不同的方法来修复这个错误。

标签： node.jsangulartypescript

解决方案

将 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>

阅读更多

模型

推荐阅读