Angular 2 | NgformControl 阻止我的 NgModel 更新

Question

这是我的代码：

HTML:

<div *ngFor="let reject of rejects, let i = index">
    <h2>{{reject.reason}}</h2>
    <input type="text" [(ngModel)]="reject.reason" [ngFormControl]="inputField">
    <rt-dropdown (selectedReason)="selectReason($event.value, i)"></rt-dropdown>
</div>

和我的主要 TS：

class {
    inputField = new Control();


    constructor( private _broadcastService : BroadcastService) {
        this.inputField.valueChanges
           .debounceTime(300)
           .subscribe(term => this._dropdownComponent.query(term));
    }
}



selectReason(text, index) {
 this.rejects[index].reason = text;
}

RT-dropdown 仅在您点击原因时发送原因。

问题是，当您点击某个原因时，{{reject.reason}} 会发生变化，但输入字段不会发生变化。

好像页面没有更新，有人遇到过吗？

谢谢

Answer 1

我会尝试以下方法：

<div *ngFor="let reject of rejects, let i = index">
  (...)
  <input type="text" [(ngModel)]="rejects[i].reason" 
         [ngFormControl]="inputField">
</div>

编辑

我会为相应的控件使用一个控件数组：

let inputFieldControls = new ControlArray([]);

for(let i = 0 ; (...) ; i++){
  inputFieldControls.push(new Control('' , Validators.required));
}

并这样使用它：

<div *ngFor="let reject of rejects, let i = index">
  (...)
  <input type="text" [(ngModel)]="rejects[i].reason" 
         [ngFormControl]="inputFieldControls[i]">
</div>

Answer 2

<div *ngFor="let reject of rejects let idx=index">
    <h2>{{reject.reason}}</h2>
    <input type="text" [(ngModel)]="rejects[idx].reason" [ngFormControl]="inputField">
    <rt-dropdown (selectedReason)="selectReason($event.value, i)"></rt-dropdown>
</div>

您还需要尽可能多的 inputField = new Control()（可能是 inputFields 的数组，因为您在 rejects 中有条目并在

中引用它们

[ngFormControl]="inputFields[idx]"

否则所有输入元素都引用同一个 Control 实例。

Angular 2 | NgformControl 阻止我的 NgModel 更新

Angular 2 | NgformControl Prevents my NgModel from updating

typescript

dropdown

angular2-ngmodel

angular