【发布时间】：2018-09-26 10:25:14
【问题描述】：
我为我的应用程序中的角色创建了 Angular 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() {
}
}
【问题讨论】：
-
表单标签位置错误。它应该涵盖所有输入字段。这行代码你想要什么@SivaRmK，我创建此标签是为了更改并添加新角色，它的位置是否错误？
标签： angular html frontend crud