如何调试"TypeError:无法读取未定义的属性'名称'"与Angular 4数据绑定?

问题描述

我是Angular的新手，我正在编写一个自定义组件，如下所述.我正在显示具有2个属性(id和名称)的Course(对象)列表.这种逻辑工作正常.但是，当我编写逻辑以使用ngModel进行绑定在custom-component.html的custom-component.html的现有课程数组中添加新课程时，出现以下错误:

I am new to Angular and I am writing a custom Component as mentioned below. I am displaying a list of Course(object) that has 2 properties, id and name. This logic works fine. However when I am writing a logic to add new Course in the existing array of Course in custom-component.html using ngModel for binding, I am getting following error:

我的代码如下:

custom-component.component.html

custom-component.component.html

<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)]="course.name">
<span>Enter id:</span><input type="text" name="id" [(ngModel)]="course.id">
<button (click)="addCourse(course)">Add Course</button>
</div>

custom-component.component.ts

custom-component.component.ts

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[];
  constructor(service: CoursesService) {
    this.courses = service.getCourse();
   }

  ngOnInit() {
  }
  onSelect(course: Course):void{
    this.selectedCourse=course;
  }
  addCourse(course: Course):void{
    this.courses.push(course);
  }
}

app.module.ts

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { CustomComponent } from './custom-component/custom-component.component';
import { CoursesService } from './courses.service';


@NgModule({
  declarations: [
    AppComponent,
    CustomComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [
    CoursesService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

推荐答案

基于评论

初始化新属性

课程:课程=新课程().

然后在 addCourse 中，您不能传递任何内容并直接使用该对象.推送后，更改引用以使其与推送的对象分开.

Then in the addCourse you can pass nothing and use that object directly. After push, change the reference to keep it separately from the pushed object.

addCourse(): void {
   this.courses.push(this.course);
   this.course = new Course();
}

这是另一种情况，上一个会为您工作

执行此操作

<button (click)="addCourse(course)">Add Course</button>

并单击按钮，您没有名称为 course 的属性，因此将undefined传递给函数并添加到数组中.此后，当 * ngFor 要更新视图时，最后添加的元素是 undefined .尝试访问它的属性将引发错误.

and click the button, you don't have a property with name course, so undefined is passed to the function and added into the array. After this when *ngFor is going to update the views, the last added element is undefined. And trying to access it's properties will throw error.

这篇关于如何调试"TypeError:无法读取未定义的属性'名称'"与Angular 4数据绑定?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！