Question

我想做一个简单的crud aplication。我有两个组件 - employee-list和add-employee。添加员工组件添加到员工列表组件，员工列表组件添加到应用程序组件。

在add-employee组件中，我有一个boostrap模式，它将数据发送到employee-list，并将其添加到数组中。（具有其属性的模型）我想使用再次使用boostrap模式编辑此数据，但它给了我一个未定义的id的错误。当我尝试添加第二个模态时，我的数据会消失。

雇员-list.TS

employeesList: Employee [];

 constructor() {}
  ngOnInit() {
  }
  onAddEmployee(employee: Employee) {
    this.employeesList.push(employee);
  }
  onDeleteEmployee(i) {
    this.employeesList.splice(i, 1);
  }

雇员-list.HTML

<app-edit-employees-modal (employeeAdded)="onAddEmployee($event)"></app-edit-employees-modal>
<table class="table table-sm">
    <h2>Employees</h2>
    <tr>
        <th>ID</th>
        <th>Name</th>
    </tr>
    <tr *ngFor="let employee of employeesList; let i= index">
        <td> {{ employee.id }} </td>
        <td> {{ employee.name }} </td>
        <td> <button type="button" class="btn btn-warning" (click)="onEditEmployee(i)">Edit</button></td>
        <td><button class="btn btn-danger" (click)="onDeleteEmployee(i)">Delete</button></td>
    </tr>
</table>

Angular 2 CRUD Boostrap模态

0 个答案: