Флажок угловой материал автоматически снимает галочку

Question

У меня есть список, который я отображаю как флажки, используя angular-material (Angular 7).Ниже я добавлю фрагмент кода для файлов .html и .ts.

Всякий раз, когда я нажимаю на флажок, он отмечается, но затем сразу не проверяется.Я вошел в режим отладки и вижу, что когда я нажимаю на флажок, мой метод isSelected() вызывается 4 раза по Angular.Когда я нажимаю на нее, она сразу переходит в проверенное состояние.Затем он все еще проверяется во второй раз, когда Angular вызывает его.В третий раз он становится не проверенным (в то время как isSelected() все еще верно).Я не могу понять, что я сделал не так.Я попробовал:

• Переключить метод 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)"

Опять же, не уверенесли это сработает, но я обнаружил, что иногда эти события щелчка происходят автоматически, если только функция предотвращения по умолчанию () не вызывается