Biểu mẫu động angular2 với ngModel của các yếu tố ngFor

Question

Tôi đang cố tạo một dạng động được kết nối với ngModel cho phép người dùng thêm nhiều điều khiển hơn nếu cần. Cũng giống như hình dưới đây:

image

Hình thức xử như mong đợi trừ khi thêm một bộ mới của điều khiển vì nó xóa nội dung đầu vào trước. Mặc dù mô hình không thay đổi. Tôi đã tạo ra plunkr này để chứng minh hành vi mà tôi đang nói đến.

Đây là mẫu html tôi đã viết:

<tr *ngFor="let work of works; let i = index"> 
 
    <td> 
 
    <select required id="cliente" class="form-control" [(ngModel)]="work.operation" name="operation"> 
 
     <option>Operation 1</option> 
 
     <option >Operation 2</option> 
 
    </select> 
 
    </td> 
 

 
    <td> 
 
    <input required type="number" class="form-control" [(ngModel)]="work.cost" 
 
      name="cost"> 
 
    </td> 
 

 
    <td> 
 
    <input required id="horas_maquina_previstas" type="number" class="form-control" [(ngModel)]="work.hours" 
 
      name="hours"> 
 
    </td> 
 

 
    <td> 
 
    <button type="button" class="btn btn-danger btn-circle" (click)="removeWork(i)">Remove</button> 
 
    </td> 
 
</tr>

và định nghĩa thành phần nguyên cảo:

import {Component, ChangeDetectionStrategy} from '@angular/core' 

@Component({ 
    selector: 'my-app', 
    templateUrl: 'src/app.html' 
}) 
export class App { 
    works = []; 

    addWork(){ 
     this.works.push({}); 
    } 

    removeWork(index){ 
     this.works.splice(index, 1); 
    } 

    get diagnostic() { 
     return JSON.stringify(this.works); 
    } 
} 

Tôi không thể hiểu hành vi này, và tất cả các liên quan câu hỏi tôi tìm thấy là về các phiên bản cũ hơn của góc và không có vấn đề tương tự.

Cảm ơn bạn!

Answer 1

Điều khiển của bạn cần tên duy nhất để hoạt động bình thường trong Angular2. Vì vậy, hãy làm như sau:

<td> 
    <input required type="number" class="form-control" [(ngModel)]="work.cost" 
      name="cost-{{i}}"> 
</td>