操纵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所有输入。请帮我解决这个问题。谢谢

编辑你的帖子，你的标记没有链接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

谢谢，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>

然而，有没有更好的解决办法？

操纵1个FormControl与多输入角2

相关推荐