使用多输入 Angular 2 操作 1 FormControl答案

【问题标题】：Manipulate 1 FormControl with Multi Input Angular 2使用多输入 Angular 2 操作 1 FormControl
【发布时间】：2017-08-11 08:23:42
【问题描述】：

我有一个这样的对象列表：

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;
          }

        });

除了输入中的初始显示值外，一切正常。所有输入都显示列表中最后一项的值。在这种情况下，所有输入的值为 7 而不是不同的值。如果我删除 [formControl] ，所有数据都会准确显示这是屏幕截图：多输入显示

我认为我的问题是对所有输入都使用 FormControl。请帮我解决这个问题。谢谢

【问题讨论】：

编辑您的帖子，您的标记与 ts 代码没有链接
@Aravind：谢谢你的提醒。我加了typescript标签，可以吗？
您的帖子有 ts 代码，变量不在标记中，您的屏幕截图看起来不同

标签： angular reactjs typescript form-control

【解决方案1】：

使用 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>

参考文献在这里：

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

【讨论】：

谢谢你，戈什。我添加了 name 属性，就像你的回答一样。但它仍然存在。但是如果我移出[formControl]所有数据显示ok。
其实我不喜欢为列表中的每个对象创建不同的FormControl。但它现在工作完美。谢谢你，戈什

【解决方案2】：

阅读@Partha Sarathi Ghosh 的回答和评论后。我终于找到了解决方案。我为列表中的每个对象添加了相同的 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>

但是，有没有更好的解决方案？

【讨论】：