Question

如果我只想在给定的复选框列表中选中一个复选框，我会使用以下代码：

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

以下是TypeScript代码：

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

虽然上面的代码工作正常，但我不明白第6行。我读过this blog，但目前尚不清楚上述解决方案的工作原理。

上面代码中的[ngModel]绑定了什么（表达式或布尔值）以及第6行代码如何工作？

Answer 1

这一行

[ngModel]= "checkedIdx== i"

当checked等于true

时，

将checkedIdx属性设置为i

这一行

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

输入modelStateChanged(...)属性更改时，

调用checked并传递当前checked值，user值和*ngFor的当前迭代索引。< / p>

简短形式

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

但是在您的示例中使用更复杂的逻辑，需要将其拆分为[ngModel]和(ngModelChange)

NgModel是用于将值绑定到表单元素的指令，ngModelChange是NgModel在输入值更改时发出的事件。

值绑定如何在[ngModel]中工作？

1 个答案: