使用多输入操作 1 个 FormControl Angular 2

Question

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

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。请帮我解决这个问题。谢谢

Answer 1

使用名称属性作为每个输入的唯一性。否则循环中的输入字段始终显示最后一项数据的值。

<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

Answer 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>

但是，有没有更好的解决办法呢？

使用多输入操作 1 个 FormControl Angular 2

Manipulate 1 FormControl with Multi Input Angular 2

typescript

reactjs

form-control

angular