ngFor चर के खिलाफ कोणीय 2 ngModel

Question

ngFor से मूल्यों के विरुद्ध ngModel का उपयोग करना संभव नहीं है (या अभी तक संभव नहीं है)? क्या कोणीय मुझे खराब प्रदर्शन से बचाने की कोशिश कर रहा है?

बढ़िया काम करता है: http://jsfiddle.net/langdonx/n5pjgev6/

<input type="text" [(ng-model)]="value">{{value}} 

इतना महान काम नहीं करता: http://jsfiddle.net/langdonx/n5pjgev6/1

<li *ng-for="#name of names"> 
    <input type="text" [(ng-model)]="name">{{name}} 
</li> 

अपवाद: बाध्यकारी नाम

मैं के लिए बाध्य की कोशिश की एक चर पुन: असाइन नहीं किया जा सकता सरणी के साथ-साथ, जो ... काम करता है, bu टी फोकस hijacks और यह भी एक अपवाद फेंकता है: http://jsfiddle.net/langdonx/n5pjgev6/2/

<li *ng-for="#name of names; #i = index"> 
    <input type="text" [(ng-model)]="names[i]">{{name}} 
</li> 

अपवाद: LifeCycle.tick रिकर्सिवली कहा जाता है

संपादित करें:

मैं एक का उपयोग कर LifeCycle.tick समस्या के समाधान प्राप्त कर सकते हैं अधिक प्रत्यक्ष दृष्टिकोण, लेकिन फोकस अभी भी चोरी हो गया है क्योंकि ngFor चीजों को दोबारा हटाता है: http://jsfiddle.net/langdonx/n5pjgev6/3/

<li *ng-for="#name of names; #i = index"> 
    <input type="text" [value]="names[i]" (input)="names[i] = $event.target.value">{{names[i]}} 
</li> 

Answer 1

मुझे लगता है कि ngFor उन सरणी तत्वों को ट्रैक करना पसंद नहीं है जो उन पर ngModel वाले आदिम मान हैं।

यदि आप लूप के अंदर ngModel हटाते हैं, तो यह काम करता है।

यह भी काम करता है जब मैं update jsfiddle साथ:

this.names = [{name: 'John'}, {name: 'Joe'}, {name: 'Jeff'}, {name: 'Jorge'}]; 

और

<li *ng-for="#n of names"><input type="text" [(ng-model)]="n.name">{{n.name}}</li> 

Answer 2

एक समाधान अपने सूचकांक द्वारा ngModel अंदर मूल्य संदर्भ के लिए है। इसलिए [(ngModel)]="names[index]"।

लेकिन यह पर्याप्त नहीं है क्योंकि *ngFor मूल्य के आधार पर आइटम ट्रैक करता है। जैसे ही मूल्य बदल जाता है, पुराने मूल्य को ट्रैक नहीं किया जा सकता है। तो हमें एक सूचकांक वापस करने के लिए ट्रैकिंग फ़ंक्शन को बदलने की आवश्यकता है, इस प्रकार trackBy: trackByIndex।

यह समस्या here समझाया गया है।

समाधान:

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <input type="text" 
     *ngFor="let name of names; let nameIndex = index; trackBy: trackByIndex" 
     [(ngModel)]="names[nameIndex]"/> 
     <br/> 
     {{ names | json }} 
    </div> 
    `, 
}) 
export class App { 

    names: string[]; 

    constructor() { 
    this.names = ['a', 'b', 'c']; 
    } 

    public trackByIndex(index: number, item) { 
    return index; 
    } 
}