कोणीय मॉडल और सिंक से बाहर प्रतिपादन

Question

मेरे पास एक कोणीय घटक है जिसमें एक बटन है जो एक मॉडल के रूप में कार्य करता है जो एक सरणी में एक नई वस्तु जोड़ता है। मेरे घटक टेम्पलेट में, मेरे पास एक * ngFor लूप है जो सरणी में ऑब्जेक्ट्स के माध्यम से पुनरावृत्त करता है और ऑब्जेक्ट के गुणों के लिए इनपुट फ़ील्ड प्रदर्शित करता है। मेरे पास प्रत्येक ऑब्जेक्ट के आगे "निकालें" बटन भी है जो ऑब्जेक्ट को सरणी से हटा देता है। जब मैं निम्न चरणों का पालन करता हूं तो यूआई मॉडल के साथ सिंक से बाहर हो जाता है और पहले आइटम को छोड़कर सभी वस्तुओं के खेतों को खाली करता है।

2. दूर करने के लिए यह
3. 1 नया जोड़े बीच आइटम पर निकालें बटन पर क्लिक कुछ डेटा के साथ इनपुट फ़ील्ड आबाद "जोड़ें" बटन
4. क्लिक करके सरणी के लिए 3 नई वस्तुओं जोड़े "जोड़ें" बटन पर क्लिक करके ऑब्जेक्ट

यूआई मॉडल के साथ सिंक से बाहर निकलने के लिए क्या कर रहा है?

यहां एक प्लंकर उदाहरण है जो Example समस्या का प्रदर्शन करता है मैंने टेम्पलेट में एक पंक्ति भी जोड़ दी जो मॉडल सरणी में क्या दिखाती है।

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
    <button (click)="things.push({})">+ Add new thing</button> 
     <br /> 
     <br /> 
     <form #contactForm="ngForm"> 
     <ng-container *ngFor="let thing of things;let i = index"> 
      <input [(ngModel)]="thing.name" name="name-{{i}}" id="name-{{i}}" placeholder="name"/> 
      <br /> 
      <input [(ngModel)]="thing.otherstuff" name="other-{{i}}" id="other-{{i}}" placeholder="other" /> 
      <button (click)="things.splice(i, 1)">Remove</button>   
      <br /> 
      <br /> 
     </ng-container> 
     </form> 
     {{things | json}} 
    </div> 
    `, 
}) 
export class App { 
    things: Awesome[] 
    constructor(){ 
    this.things = new Array(); 
    } 
} 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    FormsModule 
    ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule { 
} 

export class Awesome{ 
    name?: string; 
    otherstuff?: string; 
} 

Answer 1

सूचकांक मैं का उपयोग नाम विशेषता के लिए मूल्य देने के लिए न करें। i आपके सरणी से आइटम को विभाजित करते समय स्थिर नहीं है, इसलिए आपको प्रत्येक नई अतिरिक्त चीज़ के लिए एक अद्वितीय आईडी उत्पन्न करनी होगी (मैंने एक अद्वितीय फ़ंक्शन प्रदान किया है जो अद्वितीय आईडी उत्पन्न करता है)।

कोड के नीचे काम करता है:

//our root app component 
import { Component, NgModule, VERSION } from '@angular/core' 
import { BrowserModule } from '@angular/platform-browser' 
import { FormsModule } from "@angular/forms"; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
    <button (click)="addEmptyItem()">+ Add new thing</button> 
     <br /> 
     <br /> 
     <form> 
     <ng-container *ngFor="let thing of things"> 
      <input [(ngModel)]="thing.name" name="name-{{thing.id}}" id="name-{{thing.id}}" placeholder="name"/> 
      <br /> 
      <input [(ngModel)]="thing.otherstuff" name="other-{{thing.id}}" id="other-{{thing.id}}" placeholder="other" /> 
      <button (click)="removeItem(thing)">Remove</button>   
      <br /> 
      <br /> 
     </ng-container> 
     </form> 
     {{things | json}} 
    </div> 
    `, 
}) 
export class App { 

    things: Awesome[] 
    constructor() { 
     this.things = new Array(); 
    } 
    removeItem(thing): void { 
     this.things = this.things.filter(th => th.name !== thing.name); 
    } 
    addEmptyItem(): void { 
     let newItem = new Awesome(); 
     newItem.id = this.guid(); 
     this.things.push(newItem); 
    } 

    private guid() { 
     let uniqueId = Math.random().toString(36).substring(2) 
      + (new Date()).getTime().toString(36); 
     return uniqueId; 
    } 
} 

@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule 
    ], 
    declarations: [App], 
    bootstrap: [App] 
}) 

export class AppModule { 
} 

export class Awesome { 
    id?: string; 
    name?: string; 
    otherstuff?: string; 
}