Question

我有一个列表，使用angular-material（角度7）将其显示为复选框。下面，我将为.html和.ts文件添加代码片段。

每当我单击一个复选框时，它都会被选中，但随后立即被取消选中。我进入调试模式，然后看到当我单击一个复选框时，我的isSelected()方法被Angular调用了4次。当我单击它时，它立即进入检查状态。然后仍然检查Angular第二次调用它。第三次，它变为未选中状态（同时isSelected()仍然为true）。我无法弄清楚我做错了什么。我试过的是：

从isSelected()方法切换到类属性（在isSelected对象上添加了myListItem布尔字段）
在先前的想法之上添加了双向绑定
从checked切换到ngModel

没有任何帮助。还有什么可以尝试的，我不知道。请帮帮我。

html代码段：

class MyListItem {
  id: number
  name: string
}

// omitted annotations
export class MyComponent implements OnInit, OnDestroy {
  myList: MyListItem[] = [] // omitted initialization

  isSelected(myListItem: MyListItem): boolean {
    return this.myList.includes(myListItem)
  }

  toggle(myListItem: MyListItem): void {
    // omitted the code, I debugged it and it works correctly: 
    // it adds/removes the item to/from the list
  }
}

<mat-list>
  <mat-list-item *ngFor="let myListItem of myList">
    <mat-checkbox flex="100" (click)="toggle(myListItem)" 
                  [checked]="isSelected(myListItem)">
      {{ myListItem.name }}
    </mat-checkbox>
  </mat-list-item>
</mat-list>

Answer 1

使用change事件而不是click：

<mat-checkbox flex="100" (change)="toggle(myListItem)" 
                  [checked]="isSelected(myListItem)">
      {{ myListItem.name }}
    </mat-checkbox>

Answer 2

我不确定这是否行得通，但是您可以将Event参数添加到切换功能。

toggle(myListItem: MyListItem, event: any) { event.preventDefault() }

然后在您的HTML中：

(click)="toggle(myListItem, $event)"

再次，不确定是否能正常工作，但我发现有时这些点击事件会自动发生，除非调用了prevent default（）函数

角材料复选框自动取消选中

2 个答案: