Angular 2 | NgformControl阻止我NgModel從更新

這是我的代碼：Angular 2 | NgformControl阻止我NgModel從更新

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>

和我mainTS：當你點擊一個原因

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-下拉只發送一個理由。

問題是，當您單擊某個原因時，{{reject.reason}}會更改，但輸入字段不會更改。

這就像網頁沒有更新，任何人都可以在此體驗？

謝謝

來源

2016-06-11 L.querter

它看起來像最終爲單個組件的2個FormControl實例。也許你應該刪除ngFormControl綁定並使用'@VidewChild（「input」）input：NgFormControl'在你的控制器中注入它，而不是實例化一個新的。 – cghislai

我跟着Gunter Zochbauers回答每次重複做一次控制（只需要5次，所以效果很好！）無論如何，謝謝！ –

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

來源

2016-06-11 18:52:21

是的，這可能是問題，但我如何製作一組控制對象？就像inputFields = new Control（）[]？以某種方式給出錯誤.. –

我沒有看到你的'rejects'數組是如何構建的。你可以用'inputFields：Control [] = [];' –

'來實現'this.rejects.forEach（r => this.inputFields.push（new Control（））''你是一個Angular Genius！非常感謝第二個時間！ –

我想嘗試，而不是執行以下操作：

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

來源

2016-06-11 18:48:50

這不起作用，它只是相同 –

你可以嘗試使用控件數組作爲控件。我相應地更新了我的答案...... –

Angular 2 | NgformControl阻止我NgModel從更新

回答

相關問題