带有选项组的角度材料多选下拉列表仅从每个组中选择一项？答案

【问题标题】：Angular Material Multi Select dropdown with Option groups select only one item from each group?带有选项组的角度材料多选下拉列表仅从每个组中选择一项？
【发布时间】：2020-11-23 22:46:38
【问题描述】：

我正在尝试使用选项组实现多选下拉菜单，并且用户只能从多选下拉菜单中的每个组中选择一项。

<mat-form-field class="kb-article-filter-field" floatLabel="never">
                <mat-select name="searchSettings" multiple>
                  <mat-optgroup *ngFor="let group of textSearchTypes" [label]="group.name">
                    <mat-option *ngFor="let option of group.options" [value]="option.value">
                      {{option}}
                    </mat-option>
                  </mat-optgroup>
                </mat-select>
              </mat-form-field>

textSearchTypes = [
    {
        name: 'searchName', 
        options: [
            { name: 'test', value: 'test' },
            { name: 'test1', value: 'test1' },
            { name: 'test2', value: 'test2' }
        ]
    },
    {
        name: 'searchId', 
        options: [
            {name:'testId', value:'testId'},
            {name:'testId1', value:'testId1'},
            {name:'testId2', value:'testId1'}
        ]
    }
  ];

谁能帮助如何在多选下拉列表中从每个组中仅选择一项？

【问题讨论】：

标签： javascript angular-material angular7

【解决方案1】：

将 valueChange 事件附加到您的 mat-select。在您附加的方法中，您执行以下操作：

如果您的群组中选择了某个项目，请禁用该群组中的其他项目。
如果您的组中没有选择任何项目，请启用该组中的所有项目。

selectionChanged() {
  // Perform enable / disable for your options
}

<mat-form-field class="kb-article-filter-field" floatLabel="never">
  <mat-select name="searchSettings" multiple (valueChange)=selectionChanged()>
    <mat-optgroup *ngFor="let group of textSearchTypes" [label]="group.name">
      <mat-option *ngFor="let option of group.options" [value]="option.value">
        {{option}}
      </mat-option>
    </mat-optgroup>
  </mat-select>
</mat-form-field>

【讨论】：