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>

和我的主要内容：

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实例。

角2 | NgformControl阻止我的NgModel更新

2 个答案: