ngFor तत्वों के ngModel के साथ गतिशील कोणीय 2 फॉर्म

Question

मैं एक ngModel से जुड़ा एक गतिशील रूप बनाने की कोशिश कर रहा हूं जो उपयोगकर्ता को आवश्यकतानुसार अधिक नियंत्रण जोड़ने की अनुमति देता है। बस चित्र bellow के रूप में:

image

प्रपत्र जब नियंत्रण का एक नया सेट जोड़ने के रूप में यह पिछले इनपुट की सामग्री मिटा देता है सिवाय अपेक्षा के अनुरूप व्यवहार करता है। हालांकि मॉडल बदल नहीं है। मैंने जिस व्यवहार के बारे में बात कर रहा हूं उसका प्रदर्शन करने के लिए मैंने यह plunkr बनाया है।

<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>

और टाइपप्रति घटक परिभाषा:

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); 
    } 
} 

मैं इस व्यवहार को समझ में नहीं आ सकते हैं, और सभी संबंधित

यह एचटीएमएल टेम्पलेट मैंने लिखा है मेरे द्वारा प्राप्त प्रश्न कोणीय के पुराने संस्करणों के बारे में थे और किसी को भी ऐसी ही समस्या नहीं थी।

धन्यवाद!

Answer 1

आपके नियंत्रणों को Angular2 में ठीक से काम करने के लिए अद्वितीय नामों की आवश्यकता है। तो निम्न कार्य करें:

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