Question

我为应用程序中的角色创建了角度为5（聚会前端）的CRUD，但是按钮保存和按钮更新不起作用，并且此错误：

"ERROR TypeError: Cannot read property 'firstName' of undefined
    at Object.eval [as updateDirectives] (RoleComponent.html:47)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14640)
    at checkAndUpdateView (core.js:13787)
    at callViewAction (core.js:14138)
    at execComponentViewsAction (core.js:14070)
    at checkAndUpdateView (core.js:13793)
    at callViewAction (core.js:14138)
    at execEmbeddedViewsAction (core.js:14096)
    at checkAndUpdateView (core.js:13788)
    at callViewAction (core.js:14138)

我的代码.html：

<div class="container">
</div>
<div class="reglist">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>DOB</th>
        <th>Email</th>
        <th>Country</th>
        <th></th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let registration of registrations; let i = index">
        <th scope="row">{{ i + 1 }}</th>
        <td>{{ registration.firstName }}</td>
        <td>{{ registration.lastName }}</td>
        <td>{{ registration.dob.day + '/' + registration.dob.month + '/' + registration.dob.year}}</td>
        <td>{{ registration.email }}</td>
        <td>{{ registration.country }}</td>
        <td>
          <button type="button" class="btn btn-info" (click)="onEdit(i)">Edit</button>
        </td>
        <td>
          <button type="button" class="btn btn-danger" (click)="onDelete(i)">Delete</button>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="text-right">
    <button type="submit" class="btn btn-primary" (click)="onNew()">New</button>
  </div>
</div>
<br>

<div class="regentry" *ngIf="showNew">
  <form (ngSubmit)="onSave()"></form>
</div>

<div class="form-group row">
  <label for="firstname-input" class="col-2 col-form-label">First Name</label>
  <div class="col-10">
    <input class="form-control" type="text" [(ngModel)]="regModel.firstName" name="firstName">
  </div>
</div>

<div class="form-group row">
  <label for="lastname-input" class="col-2 col-form-label">Last Name</label>
  <div class="col-10">
    <input class="form-control" type="text" [(ngModel)]="regModel.lastName" name="lastName">
  </div>
</div>

<div class="form-group row">
  <label for="dob-input" class="col-2 col-form-label">DOB</label>
  <div class="col-3 input-group">
    <input type="text" class="form-control" placeholder="yyyy-mm-dd" name="dob" [(ngModel)]="regModel.dob" ngbDatepicker #dob="ngbDatepicker">
    <button class="input-group-addon" (click)="dob.toggle()" type="button">
<i class="fa fa-calendar" aria-hidden="true"></i>    </button>
  </div>
</div>

<div class="form-group row">
  <label for="example-email-input" class="col-2 col-form-label">Email</label>
  <div class="col-10">
    <input class="form-control" type="email" [(ngModel)]="regModel.email" name="email">
  </div>
</div>

<div class="form-group row">
  <label for="example-password-input" class="col-2 col-form-label">Password</label>
  <div class="col-10">
    <input class="form-control" type="password" [(ngModel)]="regModel.password" name="password">
  </div>
</div>

<div class="form-group row">
  <label for="city-input" class="col-2 col-form-label">Country</label>
  <div class="col-10 dropdown" ngbDropdown myDrop="ngbDropdown">
    <button type="button" class="btn btn-outline-primary" id="dropdownManual" name="country" ngbDropdownToggle>{{regModel.country}}</button>
    <div ngbDropdownMenu aria-labelledby="dropdownManual">
      <button type="button" class="dropdown-item" *ngFor="let country of countries" (click)="onChangeCountry(country)">{{country}}</button>
    </div>
  </div>
</div>

<button type="submit" class="btn btn-success">{{submitType}}</button>
<button type="submit" class="btn btn-primary" (click)="onCancel()">Cancel</button>

和这个.ts：

import { Component, OnInit } from '@angular/core';
import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';



class Registration {
  constructor(
    public firstName: string = '',
    public lastName: string = '',
    public dob: NgbDateStruct = null,
    public email: string = '',
    public password: string = '',
    public country: string = 'Select country'
  ) { }
}

@Component({
  selector: 'app-role',
  templateUrl: './role.component.html',
  styleUrls: ['./role.component.css']
})
export class RoleComponent implements OnInit {

  constructor(

  ) {
    this.registrations.push(new Registration('Johan', 'Peter', { year: 1980, month: 5, day: 12 }, 'johan@gmail.com', 'johan123', 'UK'));
    this.registrations.push(new Registration('Mohamed', 'Tariq', { year: 1975, month: 12, day: 3 }, 'tariq@gmail.com', 'tariq123', 'UAE'));
    this.registrations.push(new Registration('Nirmal', 'Kumar', { year: 1970, month: 7, day: 25 }, 'nirmal@gmail.com', 'nirmal123', 'India')); }

  registrations: Registration[] = [];
  regModel: Registration;
  showNew: Boolean = false;
  submitType: string = 'Save';
  selectedRow: number;
  countries: string[] = ['US', 'UK', 'India', 'UAE'];

  onNew() {
    this.regModel = new Registration();
    this.submitType = 'Save';
    this.showNew = true;
  }

  onSave() {
    if (this.submitType === 'Save') {
      this.registrations.push(this.regModel);
    } else {
      this.registrations[this.selectedRow].firstName = this.regModel.firstName;
      this.registrations[this.selectedRow].lastName = this.regModel.lastName;
      this.registrations[this.selectedRow].dob = this.regModel.dob;
      this.registrations[this.selectedRow].email = this.regModel.email;
      this.registrations[this.selectedRow].password = this.regModel.password;
      this.registrations[this.selectedRow].country = this.regModel.country;
    }
    this.showNew = false;
  }

  onEdit(index: number) {
    this.selectedRow = index;
    this.regModel = new Registration();
    this.regModel = Object.assign({}, this.registrations[this.selectedRow]);
    this.submitType = 'Update';
    this.showNew = true;
  }

  onDelete(index: number) {
    this.registrations.splice(index, 1);
  }

  onCancel() {
    this.showNew = false;
  }

  onChangeCountry(country: string) {
    this.regModel.country = country;
  }

  ngOnInit() {
  }

}

Answer 1

第47行出现了问题，这是：

 <input class="form-control" type="text" [(ngModel)]="regModel.firstName" name="firstName">

这是Angular第一次尝试将firstName对象的regModel属性的值绑定到已经为undefine的输入元素。

解决方案是使用类Registration的实例来初始化regModel。

您应该像为regModel: Registration初始化registrations: Registration[] = []的值

例如：

registrations: Registration[] = [];
regModel: Registration = {}; //or regModel: Registration = new Registration ()

希望这会有所帮助！

Answer 2

您尚未在构造函数中初始化regModel，只需在构造函数中添加以下内容

this.regModel = new Registration();

如何使用Angular 5创建CRUD

2 个答案: