2016-04-07 16 views
13

में बाध्य करें मैं कोणीय 1 एप को कोणीय में परिवर्तित करने का प्रयास कर रहा हूं 2. बूलियन (boolean[][]) की एक जंजीर सरणी के माध्यम से लूपिंग। मैं निम्नलिखित कोड के साथ checkboxes बाहर प्रतिपादन कर रहा हूँ:कोणीय 2 एनजी मॉडेल नेस्टेड एनजीएफ

<div *ngFor="#cell of CellData; #parentIndex = index"> 
    <input *ngFor="#col of cell; #childIndex = index" type="checkbox" [(ngModel)]="CellData[parentIndex][childIndex]" />  
</div> 

चेक बॉक्स को सही ढंग से प्रदर्शन, हालांकि, अगर मैं एक चेकबॉक्स उसके दाईं ओर स्थित एक भी चयन किया जाता है का चयन करें।

यह तर्क कोणीय 1 अनुप्रयोग में ठीक काम करता है तो मुझे यकीन है कि अगर यह रास्ता मैं ngModel या कोणीय 2.

के साथ किसी समस्या का उपयोग कर रहा कोई भी मदद की बहुत सराहना की जाएगी साथ एक समस्या है नहीं कर रहा हूँ

+0

आप एक Plunker कि इस मुद्दे को दर्शाता है प्रदान कर सकते हैं? –

+2

इस plunkr https://plnkr.co/edit/BbZxbAS0jNafAfI6slq9?p=preview, @Gunter देखें। वास्तव में अद्यतनों से जुड़े अजीब अपडेट्स के साथ मेल खाता है लेकिन दृश्य desynchronized है ... –

+0

पहले इसे मिला, मैं इसके लिए एक प्लंकर पोस्ट करने वाला था;) –

उत्तर

17

अद्यतन

ngForTrackBy उपयोग करने के लिए आधिकारिक तरीका प्रतीत हो रहा है

 <input 
      *ngFor="let col of cell; let childIndex=index; trackBy:customTrackBy" 
      type="checkbox" 
      [(ngModel)]="CellData[parentIndex][childIndex]" />  
,210

अधिक जानकारी के

के लिए http://angularjs.blogspot.co.at/2016/04/5-rookie-mistakes-to-avoid-with-angular.html देखें

टिप्पणी :trackBy:customTrackBy में

मूल

आप इस के लिए *ngForTrackBy उपयोग कर सकते हैं:

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div *ngFor="let cell of CellData; let parentIndex = index"> 
     <input 
      *ngFor="let col of cell; let childIndex = index" type="checkbox" 
      *ngForTrackBy="customTrackBy" 
      [(ngModel)]="CellData[parentIndex][childIndex]" />  
    </div> 

    Data:<br/><br/> 
    {{CellData | json}} 
    ` 
}) 
export class AppComponent { 
    constructor() { 
    this.CellData = [ 
     [ true, false, true, false ], 
     [ false, true, false, true ] 
    ] 
    } 

    customTrackBy(index: number, obj: any): any { 
    return index; 
    } 
} 

डिफ़ॉल्ट रूप से कोणीय वस्तु पहचान पटरियों लेकिन अलग true एस और false के पास एक ही पहचान है। *ngForTrackBy बिना कोणीय ट्रैक को true या false किस स्थिति पर ट्रैक करता है। *ngForTrackBy="customTrackBy" के साथ हम *ngFor ऑब्जेक्ट पहचान के बजाय अनुक्रमणिका का उपयोग करते हैं।

Plunker example

भी देखें

संबंधित मुद्दे