Mat Select on Select 介绍

简介

Mat Select on Select 是一个 Angular Material 组件库中的下拉框组件，具有动态绑定与多级联动的功能。

最常见的下拉框功能是一个固定的选项列表，但是在某些情况下，选项列表可能会动态变化，例如：基于之前选择的选项值的决定，展示下一个选项列表。这时候，Mat Select on Select 就能够发挥它的优势了。

Mat Select on Select 提供了多级联动的功能，每当一个下拉框的选项值改变时，它会动态决定下一个下拉框的选项列表，这使得多级选项列表变得更加可控。

用法

安装

在使用 Mat Select on Select 之前，需要先安装 Angular Material，可参考官方文档 Getting started with Angular Material。

通过 package manager 安装 Mat Select on Select:

npm install --save @ashishd001/mat-select-on-select

使用

在你的 Angular 应用中，需要在模块中导入 MatSelectOnSelectModule ：

import { MatSelectOnSelectModule } from '@ashishd001/mat-select-on-select';

@NgModule({
  imports: [
    // ...
    MatSelectOnSelectModule,
  ],
})
export class AppModule { }

然后，在你的 html 模板中，使用 mat-select-on-select 组件来创建一个下拉框及其选项列表。在 matSelectOnSelect 属性中绑定一个方法，当下拉框的选项值改变时，此方法会被调用。该方法接收当前选中选项值及其下拉框的元素作为参数。

<mat-form-field>
  <mat-label>Select One</mat-label>
  <mat-select matSelectOnSelect (onSelect)="onSelect($event.value, $event.el)">
    <mat-option *ngFor="let option of options1" [value]="option">{{option}}</mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field>
  <mat-label>Select Two</mat-label>
  <mat-select [options]="options2" id="secondSelect"></mat-select>
</mat-form-field>

在你的 component.ts 文件中，定义 onSelect 方法。 在这个方法中，你可以根据当前选中的选项值来决定下一个下拉框的选项列表。在本例中，将根据第一个下拉框的选项值为 Option 1 或 Option 2，决定第二个下拉框的选项列表。

import { MatSelectOnSelectChange } from '@ashishd001/mat-select-on-select';

export class MyComponent {
  options1 = ['Option 1', 'Option 2'];
  options2 = [];

  onSelect(selectedValue: any, el: HTMLElement) {
    if (selectedValue === 'Option 1') {
      this.options2 = ['Option 1.1', 'Option 1.2', 'Option 1.3'];
    } else if (selectedValue === 'Option 2') {
      this.options2 = ['Option 2.1', 'Option 2.2', 'Option 2.3'];
    }
    
    // 把决定后的选项列表放到下一个下拉框中
    const select = el.closest('mat-form-field').nextElementSibling.querySelector('mat-select');
    select.options = this.options2.map(option => {
      return { value: option, textContent: option };
    });
  }
}

总结

Mat Select on Select 提供了一个方便的解决方案，用于解决下拉框中的动态变化问题。使用 Mat Select on Select，可以实现多级下拉框的联动，并使您的页面更加可控。