Wie funktioniert die Wertbindung in [ngModel]?

Question

würde ich den folgenden Code verwenden, wenn ich nur eine Checkbox, wollte in einer vorgegebenen Liste von Kontrollkästchen ausgewählt werden:

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

Im Folgenden ist der Typoskript Code:

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

Obwohl die oben Code funktioniert, ich verstehe die 6. Zeile nicht. Ich lese this blog, aber es ist immer noch nicht klar, wie die obige Lösung funktioniert.

Was ist mit dem [ngModel] im obigen Code gebunden (ein Ausdruck oder boolescher Wert) und wie funktioniert die 6. Codezeile?

Answer 1

Diese Linie

[ngModel]= "checkedIdx== i" 

setzt die checked Eigenschaft auf true wenn checkedIdx gleich i

Diese Linie

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

Anrufe modelStateChanged(...), wenn die Eingänge checked Eigenschaftsänderungen und den aktuellengibt 10 Wert, der user Wert und der aktuelle Iterationsindex von *ngFor.

würde die Kurzform

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

aber mit komplexeren Logik sein wie in Ihrem Beispiel muss es in [ngModel] und (ngModelChange)

NgModel ist für die Bindung Werte verwendet, um eine Richtlinie aufgeteilt werden Elemente zu bilden, und ngModelChange ist ein Ereignis, das von NgModel ausgegeben wird, wenn sich der Wert des Eingangs ändert.