带selectionModel的mat-checkbox-检查的属性不起作用

Question

选择第5个复选框后，我希望通过取消选中mat-checkbox来更新视图。但是，情况并非如此...当我console.log时，它返回正确的结果，但是视图/复选框不反映这一点...有什么想法吗？

<mat-checkbox (click)="$event.stopPropagation()"
              (change)="$event ? toggleRow(row) : null"
              [checked]="selection.isSelected(row)"
              [aria-label]="checkboxLabel(row)">
</mat-checkbox>

  toggleRow(row) {
    console.log('selection before', this.selection.selected);
    this.selection.toggle(row);
    if (this.selection.selected.length >= 5) {
      this.selection.deselect(row);
    }
    console.log('selection.isSelected', this.selection.isSelected(row));
    console.log('selection after', this.selection.selected);
  }

Answer 1

我认为您必须先取消超时，然后再取消选中该复选框。可能是角度变化检测机制无法迅速识别出该变化。由于您正在执行取消选择，因此请选中第5个复选框。

if (this.selection.selected.length >= 5) {
       setTimeout(() => {
          this.selection.deselect(row);
       }, 10);
    }

我不知道您的情况是否很好，下面的方法也可以解决

if (this.selection.selected.length >= 5) {
        setTimeout(() => {
            this.selection.deselect(row);
        });
    }