angular - 'checked' 和 (ngModel) 有什么区别

Question

所以我继承了一个从ionic3不完全移植到ionic4的项目。当更新一些 <ion-checkbox>我不得不改变的例子:

  <ion-checkbox 
    checked="selected.get(request.id)" 
    (click)="selectItem(request.id)" 
    color="tertiary" 
    slot="start"
  >

到:

  <ion-checkbox 
    (ngModel)="selected.get(request.id)" 
    (click)="selectItem(request.id)" 
    color="tertiary" 
    slot="start"
  >

让它正确切换。使用 checked导致它在每次第一次点击时失火，并且从该点向前反转该值。
(ngModel)到底是什么在这种情况下做什么？这基本上是 ionic docs 中显示的未记录功能。没有解释或示例使用...

请注意 selected是 Map<number, boolean>并且在同一 View 中的其他地方使用该 bool 值按预期工作。

编辑:我知道 HTML 属性和 ng 数据模型之间的区别，我只是不清楚该机制是如何在这里工作的......

Answer 1

在高层次上，checked属于 HTML 而 ngModel属于 Angular 。

[检查]
checked是复选框的 HTML 属性，在 Angular 中，您可以使用以下代码设置复选框的选中属性。

[checked]="item.checked"

[(ngModel)]
[(ngModel)]是用于双向绑定(bind)的 Angular 属性，这意味着您在 .ts 中所做的任何更改文件将反射(reflect)在您的 View 中，反之亦然。 More info

[(ngModel)]="item.checked"

现在，你什么时候使用这些？ [checked]当您的要求只是设置元素的选中属性时使用，而您使用 [(ngModel)]将元素值绑定(bind)到 .ts 中的变量文件，以便您可以访问它以获取您的逻辑。