अपडेट कर रहा है इनपुट अन्य इनपुट को प्रभावित करता है अभी तक वहाँ कोई बाध्यकारी

Question

है यहाँ मेरी HTML है:

<tr *ngFor="let row of formData; let i = index" [attr.data-index]="i"> 
    <td *ngFor="let rowdata of formData[i]; let j = index" [attr.data-index]="j"> 
     <input type="checkbox" name="row-{{i}}-{{j}}" [(ngModel)]="formData[i][j]"> 
    </td> 
</tr> 

आप देख सकते हैं मैं उन्हें पूरी तरह से अलग करने के लिए checkboxes पर अद्वितीय नामों निर्धारित किया है।

formData = [ 
      [false, false], 
      [true, true], 
      [false, true] 
      ] 

प्रपत्र सही ढंग से भरता है:

formData इस तरह की एक संरचना इस प्रकार है।

स सही ढंग से उत्पन्न कर रहे हैं, तथापि, वहाँ कुछ अजीब व्यवहार है:

जब मैं पहली बार स्तंभ के लिए चेकबॉक्स पर क्लिक करें, यह भी दूसरे स्तंभ के लिए बॉक्स की जाँच करता है; यह कुल यादृच्छिक व्यवहार की तरह लगता है, लेकिन जब मैं दूसरे कॉलम के लिए एक बॉक्स की जांच करता हूं, तो इसका पहले कॉलम

किसी भी विचार के कारण चेकबॉक्स पर कोई प्रभाव नहीं पड़ता है?

संपादित

अवलोकन: मैं एक मानक इनपुट (नहीं चेकबॉक्स) को input बदल दिया है।

मैंने फ़ॉर्म मानों को "सत्य", "झूठा" में बदल दिया .. सच, गलत के बजाय।

जब मैं इनपुट में पाठ को बदलने की कोशिश करता हूं, तो मैं केवल एक वर्ण टाइप कर सकता हूं और इनपुट बॉक्स "अचयनित करता है" (यानी- जब भी मैं एक अक्षर टाइप करता हूं तो इसे सक्रिय करने के लिए मुझे इनपुट बॉक्स पर क्लिक करना पड़ता है)

संपादित

एचटीएमएल आउटपुट के रूप में अनुरोध:

Answer 1

दूसरा ngFor में trackBy का उपयोग करते हुए यह मेरे लिए काम किया:

टेम्पलेट:

<tr *ngFor="let row of formData['rows']; let i = index;" [attr.data-index]="i"> 
    <td *ngFor="let rowdata of formData['rows'][i]; let j = index; trackBy: trackByIndex" [attr.data-index]="j"> 
     <input type="checkbox" id="row-{{i}}-{{j}}" name="row-{{i}}-{{j}}" [(ngModel)]="formData['rows'][i][j]"/> 
    </td> 
</tr> 

घटक:

trackByIndex समारोह को परिभाषित करें:

trackByIndex(index: number, value: number) { 
    return index; 
} 

कारण एक trackBy उपयोग करने के लिए समझाया here (क्रेडिट zoechi@github को जाता है) है :

आप उन वस्तुओं को पुन: सक्रिय कर रहे हैं जिन्हें आप संपादित कर रहे हैं और वे आदिम मान हैं। ngFor पहचान द्वारा ट्रैक नहीं रख सकता है क्योंकि जब मान 1 से 3 (संपादन करके) में परिवर्तन होता है तो यह एक अलग पहचान बन जाता है। या तो कस्टम ट्रैक का उपयोग करें जो इंडेक्स द्वारा ट्रैक करता है या ऑब्जेक्ट्स का उपयोग आदिम मूल्यों के बजाय करता है।