Angular mat-chip-option手动操作后无法响应绑定变量变更问题咨询

这不是预期行为，问题出在单向绑定的使用方式上。

问题原因 #

你当前使用的是单向绑定 [selected]="testState"，这种绑定只会在初始化和testState首次变更时同步视图状态。但当用户手动点击mat-chip-option时，组件内部会直接更新自身的选中状态，却不会同步回testState变量——这就导致了模型（testState）和视图（组件内部状态）脱节。后续修改testState时，Angular变更检测会认为值没有“真正驱动视图需要的变化”，因此不会更新芯片的选中状态，直到你把testState设置成和组件当前内部状态一致的值，才会重新建立同步。

解决方案 #

推荐以下两种修复方式：

1. 使用双向绑定（最简洁）

把单向绑定改成双向绑定 [(selected)]="testState"，这样用户手动操作时，组件会自动将内部状态同步回testState，始终保持模型和视图一致：

<mat-chip-listbox>
    <mat-chip-option [(selected)]="testState">
        Option
    </mat-chip-option>
</mat-chip-listbox>

修改后，不管是通过按钮修改testState，还是用户手动点击芯片，两者的状态都会实时同步，你的测试用例里的异常情况会完全消失。

2. 手动同步组件状态（适合需要自定义逻辑的场景）

如果你不想用双向绑定，可以通过ViewChild获取芯片实例，在修改testState后强制同步组件状态：

import { Component, ViewChild } from '@angular/core';
import { MatChipOption } from '@angular/material/chips';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  testState: boolean = false;
  @ViewChild(MatChipOption) chipOption!: MatChipOption;

  setState(newState: boolean) {
    this.testState = newState;
    // 强制将模型值同步到组件实例
    this.chipOption.selected = newState;
  }
}

这种方式主动覆盖组件内部的选中状态，确保模型和视图始终同步。

验证效果 #

采用上述任意一种方案后，重新测试你的用例：

• 用例2中，手动选中芯片后点击「Set Selected False」，芯片会立即取消选中
• 用例3中，手动取消选中后点击「Set Selected True」，芯片会立即选中

完全符合预期逻辑。

内容的提问来源于stack exchange，提问作者Stephen Patton