操縱1個FormControl與多輸入角2

我有這樣的對象的列表：操縱1個FormControl與多輸入角2

listSubject = [ 
{name: 'Math', lessonPerWeeks: 1}, 
{name: 'Lit', lessonPerWeeks: 2}, 
{name: 'Bio', lessonPerWeeks: 3}, 
{name: 'Phy', lessonPerWeeks: 7}, 
{name: 'Remains', lessonPerWeeks: 36}, 
];

我把它們在輸入的環路用於改變值是這樣的：

<div *ngFor="let subject of listSubject"> 
<input *ngIf="subject.name != 'Remains'" type="number" [(ngModel)]="subject.lessonsPerWeeks" [formControl]="changeValue"> 
<div *ngIf="subject.name === 'Remain'"> 
    {{subject.lessonPerWeeks}} 
</div> 
</div>

的FormControl ：changeValue用於檢測輸入變化以重新計算每個主題的總數超過總數的百分比：

this.changeValue 
     .valueChanges 
     .debounceTime(200) 
     .subscribe(()=>{ 
      for(let i=0; i < this.listSubject.length;i++){ 
      let subject = this.listSubject[i]; 
      let lastSubject = this.listSubject[this.listSubject.length-1]; 
      subject.percentSem1 = subject.lessonPerWeeks/ this.totalLessonPerWeeks * 100; 


      if(i === this.listSubject.length - 1){ 
       return; 
      } 
      else if(i === 0){ 
       lastSubject.lessonPerWeeks = 36; 

      } 
      lastSubject.lessonPerWeeks -= subject.lessonPerWeeks; 
      } 

     });

Eve除了輸入中的初始顯示值之外，其他工作都可以正常工作。所有輸入都顯示列表中最後一項的值。在這種情況下，所有輸入的值是7而不是不同的值。如果我刪除[formControl]，所有的數據顯示究竟下面是截圖：多輸入顯示

我想我的問題是使用FormControl所有輸入。請幫我解決這個問題。謝謝

來源

2017-03-20 TheRemjx

編輯你的帖子，你的標記沒有鏈接ts代碼 – Aravind

@Aravind：謝謝你的提醒。我添加了打字稿標記，可以嗎？ – TheRemjx

你的文章有ts代碼和變量不在標記你的截圖看起來不同 – Aravind

使用name屬性作爲每個輸入的唯一。否則，在循環中的輸入字段總是顯示最後一項數據的值。

<div *ngFor="let subject of listSubject; let i = index"> 
<input *ngIf="subject.name != 'Remains'" 
type="number" name="field_{{i}}" 
[(ngModel)]="subject.lessonsPerWeeks" [formControl]="changeValue"> 
<div *ngIf="subject.name === 'Remain'"> 
    {{subject.lessonPerWeeks}} 
</div> 
</div>

引用在這裏：閱讀@Partha Sarathi戈什答案和註釋

angular2-ngmodel-inside-ngfor-data-not-binding-on-input

angular2-binding-of-name-attribute-in-input-elements-with-ngfor

dynamic-angular2-form-with-ngmodel-of-ngfor-elements

來源

2017-03-20 06:42:16

謝謝，Ghosh。我已經像你的答案一樣添加了名稱屬性。但它仍然存在。但如果我移出[formControl]所有數據顯示正常。 – TheRemjx

也許'formControl'也需要是唯一的。 –

實際上，我不喜歡爲列表中的每個對象創建不同的FormControl。但現在工作很完美。謝謝，Ghosh – TheRemjx

後。我終於找到了解決方案。我爲列表中的每個對象添加了一個相同的FormControl，然後將它們綁定到HTML中。打字稿代碼：

this.listSubject.forEach((subject)=>{ 
     subject.changeValue = new FormControl(); 
     subject.changeValue 
      .valueChanges 
    .debounceTime(200) 
    .subscribe(()=>{ 
     for(let i=0; i < this.listSubject.length;i++){ 
     let subject = this.listSubject[i]; 
     let lastSubject = this.listSubject[this.listSubject.length-1]; 
     subject.percentSem1 = subject.lessonPerWeeks/ this.totalLessonPerWeeks * 100; 


     if(i === this.listSubject.length - 1){ 
      return; 
     } 
     else if(i === 0){ 
      lastSubject.lessonPerWeeks = 36; 

     } 
     lastSubject.lessonPerWeeks -= subject.lessonPerWeeks; 
     } 

    });}

和HTML

<div *ngFor="let subject of listSubject"> 
<input *ngIf="subject.name != 'Remains'" type="number" [(ngModel)]="subject.lessonsPerWeeks" [formControl]="subject.changeValue"> 
<div *ngIf="subject.name === 'Remain'"> 
    {{subject.lessonPerWeeks}} 
</div> 
</div>

然而，有沒有更好的解決辦法？

來源

2017-03-20 07:26:01 TheRemjx

操縱1個FormControl與多輸入角2

回答

相關問題