如何使用Angular 5创建积垢

我使用angular 5（party前端）为我的应用程序中的角色创建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>

---

问题出现在第47行，它是：

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

---

希望这会有帮助

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

this.regModel = new Registration();

---

表单标签位于错误的位置。它应该覆盖所有的输入字段。你想用这行代码@SivaRmK做什么？我创建这个标签是为了更改，也是为了添加新角色，它的位置错了吗？它可以工作，谢谢我的朋友，但是按钮保存和更新不起作用。

{{submitType}

调用

onSave（）

从按钮点击或者你应该更改表单标签的位置，包括按钮在内的所有字段都应该在表单标签内。如果是“保存”或“更新”？

this.selectedRow

是否有任何价值？party.ts的意思是什么？我不明白你的问题。我想说的是，当我使用动态数据时，我会用什么来修改静态数据（在我的示例中，我有一个动态元素“RoleName”）

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

this.regModel = new Registration();