Angular mat-checkbox 不确定未按预期运行

Question

我正在使用 Angular 7 和 Angular Material 7.3.7，我正在尝试创建一个无序列表的 mat-checkbox。我遇到了不一致的行为，不确定的并不总是在应该显示的时候显示。这是我的代码：

HTML:

<ul>
  <li *ngFor="let persona of personas">
    <mat-checkbox [checked]="persona.checked" [indeterminate]="persona.indeterminate">
      {{ labels[persona.name] }}
    </mat-checkbox>
  </li>
</ul>

TS:

// Called by event listener. Updates the data displayed by checkboxes
updateDataCallback = () => {
  // does some logic
  // updates personas object, for example:
  this.personas = [
    {name: 'persona1', checked: false, indeterminate: false},
    {name: 'persona2', checked: false, indeterminate: true},
    {name: 'persona3', checked: false, indeterminate: false},
    {name: 'persona4', checked: false, indeterminate: false},
  ]
}

我注意到的具体问题是，当我从这个状态 checked: true, indeterminate: false 移动到这个状态 checked: false, indeterminate: true 时，它没有改变 - 复选框保持选中状态并且不代表不确定状态。我还没有发现任何其他问题，但如果有其他类似问题，我也不会感到惊讶。

有没有其他方法可以处理已检查和不确定的逻辑？这似乎在大多数情况下都可以正常工作，但对于一些极端情况，我需要找到更好的解决方案。谢谢！

Answer 1

在Angular Material的文档中指出：

check-indeterminate: Default behavior of mat-checkbox. Always set indeterminate to false when user click on the mat-checkbox. This matches the behavior of native

因此，似乎在选中复选框后，不确定状态变为 false，然后我们无法再次看到该状态，除非我们再次明确将其设置为 false。文档中有一个示例，可以让您了解如何使用不确定状态。请参考 link (stackblitz) 他们的例子。

Angular mat-checkbox 不确定未按预期运行

Angular mat-checkbox indeterminate not behaving as expected

html

angular

typescript

angular-material

angular7