Angular CDK Listbox代码强制选中项无法像手动选中一样显示

当你通过代码直接修改单选选中变量时，Angular CDK Listbox不会自动同步内部选中状态——这就是界面没反应的核心原因：手动点击时CDK会自动维护状态，但代码修改需要主动触发同步。以下是几种可靠的解决方式：

1. 用双向绑定同步状态 #

把模板里的[selected]改成双向绑定[(selected)]，这样组件中修改选中变量时，CDK会自动感知并更新界面：

<cdk-listbox [(selected)]="selectedOption">
  <cdk-listbox-option *ngFor="let opt of options" [value]="opt">
    {{ opt.label }}
  </cdk-listbox-option>
</cdk-listbox>

组件里直接修改selectedOption即可：

setSelectedByCode() {
  this.selectedOption = this.options[2]; // 选中第三个选项
}

2. 通过Listbox实例主动触发选中 #

如果需要更灵活的控制，用ViewChild获取Listbox实例，调用它的select()方法来设置选中项，同时同步绑定变量：

import { ViewChild } from '@angular/core';
import { CdkListbox } from '@angular/cdk/listbox';

// 组件类内
@ViewChild(CdkListbox) private listbox!: CdkListbox;

setSelectedByCode() {
  const targetOpt = this.options[1];
  this.listbox.select(targetOpt);
  this.selectedOption = targetOpt;
}

这种方式会直接触发CDK的内部状态更新，界面会立刻显示选中样式。

3. 保证选项引用一致 #

如果选项是对象类型，不要新建对象赋值给选中变量，必须从原options数组中取已有对象。比如不要写this.selectedOption = { id: 3, label: '新选项' }，而是用this.selectedOption = this.options.find(opt => opt.id === 3)，否则CDK无法匹配到对应的列表项。

内容的提问来源于stack exchange，提问作者Roberto Camargo