使用Angular CDK Listbox创建列表却无法选择的问题排查

你的代码存在两个核心问题导致选项无法被选中：

• cdkOption绑定语法错误
  你使用了cdkOption="tag.text"，这会将字符串"tag.text"作为所有选项的固定值，而非绑定到循环变量tag.text。Angular中绑定组件属性到变量必须使用方括号语法，修改后：

  <li *ngFor="let tag of tags" [cdkOption]="tag.text">
    {{tag.text}}
  </li>
  

• 缺失无障碍访问标签（可选但推荐）
  官网示例通过aria-labelledby关联标签，这是无障碍访问的最佳实践，也能保证组件行为更符合规范。你可以补充该属性：

  <label id="tag-list-label">选择标签</label>
  <ul cdkListbox
      cdkListboxMultiple
      (cdkListboxValueChange)="onSelect($event)"
      [cdkListboxDisabled]="false"
      aria-labelledby="tag-list-label"
      >
    <li *ngFor="let tag of tags" [cdkOption]="tag.text">
      {{tag.text}}
    </li>
  </ul>
  

同时请确认组件类中已正确定义tags数组和onSelect方法，确保数据正常传递：

tags = [{text: '标签1'}, {text: '标签2'}, {text: '标签3'}];

onSelect(event: any) {
  console.log('选中项:', event.value);
}

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