Angular4数据绑定"TypeError: Cannot read property 'name' of undefined"错误调试方法

嗨，我来帮你搞定这个问题！你遇到的这个错误根源很明确：你在模板里用[(ngModel)]="course.name"绑定输入框，但组件类里根本没声明和初始化course变量——它默认是undefined，自然没法读取name或id属性。

下面是具体的修复步骤和修改后的代码：

第一步：在组件类中添加并初始化用于绑定的Course对象 #

打开custom-component.component.ts，在类里添加一个专门用于新课程输入的属性（比如叫newCourse，避免和循环里的course变量混淆），并初始化它：

import { Course } from './../Course';
import { Component, OnInit } from '@angular/core';
import { CoursesService } from '../courses.service';

@Component({
  selector: 'app-custom-component',
  templateUrl: './custom-component.component.html',
  styleUrls: ['./custom-component.component.css']
})
export class CustomComponent implements OnInit {
  title = "Choosen Courses";
  selectedCourse: Course;
  courses: Course[];
  // 新增：初始化一个空的Course对象用于绑定输入框
  newCourse: Course = { id: 0, name: '' }; // 如果你的Course接口中id是字符串，就改成id: ''

  constructor(service: CoursesService) {
    this.courses = service.getCourse();
  }

  ngOnInit() {
  }

  onSelect(course: Course):void{
    this.selectedCourse=course;
  }

  // 修改addCourse方法：不再接收参数，直接使用组件内的newCourse
  addCourse():void{
    // 将新课程添加到数组里（用扩展运算符是为了创建副本，避免后续修改影响已添加的课程）
    this.courses.push({...this.newCourse});
    // 重置输入框，方便下次添加
    this.newCourse = { id: 0, name: '' };
  }
}

第二步：修改模板中的ngModel绑定 #

打开custom-component.component.html，把输入框的绑定目标改成我们刚创建的newCourse，同时更新按钮的点击事件：

<h2>{{ title }}</h2>
<ul class="courses">
<li *ngFor="let course of courses" (click)="onSelect(course)" [class.selected]="course===selectedCourse">
<span class="badge">{{course.id}}</span> {{course.name}}
</li>
</ul>
<div *ngIf="selectedCourse">
<ul class="courses"><li>
<span class="badge">{{selectedCourse.id}}</span> {{selectedCourse.name}}</li>
</ul>
</div>
<div>
<span>Enter name: </span><input type="text" name="name" [(ngModel)]="newCourse.name">
<span>Enter id:</span><input type="text" name="id" [(ngModel)]="newCourse.id">
<button (click)="addCourse()">Add Course</button>
</div>

补充说明 #

• 如果你的Course是一个类（而不是接口），那初始化的时候应该用new Course()，比如：

  newCourse: Course = new Course();
  

• 我们在addCourse里用{...this.newCourse}是创建一个新对象，而不是直接推newCourse的引用——这样后续修改输入框内容不会影响已经添加到数组里的课程。

这样修改后，你就能正常添加新的Course对象到数组里，不会再出现那个undefined的错误啦！

内容的提问来源于stack exchange，提问作者Sachin Kumar