[ngModel]中的值綁定如何工作？

我會用下面的代碼，如果我想在檢查盒給定的列表中選擇只有一個複選框：[ngModel]中的值綁定如何工作？

<ion-list> 
    <ion-item no-lines *ngFor="let account of accounts; let i = index" text-wrap> 
     <ion-label> 
      <div user-name>{{account.firstName}}</div> 
     </ion-label> 
     <ion-checkbox item-right secondary [ngModel]= "checkedIdx== i" 
      (ngModelChange)="modelStateChanged($event, user, i)"></ion-checkbox> 
    </ion-item> 
</ion-list>

以下是打字稿代碼：

checkedIdx:number = -1; 
modelStateChanged(event, user, index) { 
    this.checkedIdx = index; 
}

雖然以上代碼正在工作，我不明白第6行。我讀this blog，但仍不清楚上述解決方案是如何工作的。

什麼是在上面的代碼（一個表達式或布爾值），並結合到[ngModel]如何做代碼工作的第6行？

來源

2017-02-05 Sandeep Sharma

此行

[ngModel]= "checkedIdx== i"

設置checked屬性true當等於i

此行

(ngModelChange)="modelStateChanged($event, user, i)"

呼叫modelStateChanged(...)當輸入checked屬性變更並傳遞電流checked值，該值user和從*ngFor當前迭代指數。

短形式將是

[(ngModel)]="checkedValues[i]"

但具有更復雜的邏輯像在你的例子，它需要在[ngModel]和(ngModelChange)

NgModel被分割爲用於結合值以形成元件一指令，並ngModelChange是輸入值改變時由NgModel發出的事件。

來源

2017-02-05 16:34:36

但是當已經選擇了一個複選框，用戶選擇另一個複選框，兩人的複選框的狀態正在改變，那麼爲什麼modelStateChanged（）被調用只有一次，如何複選框前面的是在這種情況下被deseleted？ –

當'checkedIdx'然後更新'checkedIdx == i'是'FALSE'此複選框，併成爲另一個複選框'真'。角度更改檢測頻繁（發生事件時）運行並更新（重新評估）所有這些綁定。 –

和當我們選擇/取消選擇一個特定的複選框，this.checkedIdx值保持相同的，因此又是什麼[ngModel] =「checkedIdx == I」在這種情況下在做什麼？ –

[ngModel]中的值綁定如何工作？

回答

相關問題