Angular Material 7 – 选择|极客笔记

Angular Material 7 – 选择

在 Angular Material 中，选择是一种常见的用户交互方式，可以让用户在给定的选项中进行选择。Angular Material 提供了各种选择组件，包括单选按钮、多选框、下拉列表、滑块和日期选择器。本文将探讨如何使用这些组件实现选择功能。

单选按钮

单选按钮允许用户从一组选项中选择一个选项。在 Angular Material 中，单选按钮使用 mat-radio-group 和 mat-radio-button 组件实现。

<mat-radio-group [(ngModel)]="selectedOption">
  <mat-radio-button [value]="optionOne">选项1</mat-radio-button>
  <mat-radio-button [value]="optionTwo">选项2</mat-radio-button>
  <mat-radio-button [value]="optionThree">选项3</mat-radio-button>
</mat-radio-group>

在上面的示例中，mat-radio-group 绑定到选中的选项并管理其值，mat-radio-button 定义了每个选项并指定其值。ngModel 指令用于双向绑定选中的选项。

多选框

多选框允许用户从一组选项中选择多个选项。在 Angular Material 中，多选框使用 mat-checkbox 组件实现。

<mat-checkbox [(ngModel)]="optionOneSelected">选项1</mat-checkbox>
<mat-checkbox [(ngModel)]="optionTwoSelected">选项2</mat-checkbox>
<mat-checkbox [(ngModel)]="optionThreeSelected">选项3</mat-checkbox>

在上面的示例中，mat-checkbox 绑定到选中的选项并管理其值，ngModel 指令用于双向绑定选中的选项。

下拉列表

下拉列表允许用户从一组选项中选择一个选项。在 Angular Material 中，下拉列表使用 mat-select 和 mat-option 组件实现。

<mat-form-field>
  <mat-label>选择一个选项</mat-label>
  <mat-select [(ngModel)]="selectedOption">
    <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
  </mat-select>
</mat-form-field>

在上面的示例中，mat-select 绑定到选中的选项并管理其值，mat-option 定义了每个选项并指定其值。*ngFor 指令用于循环遍历选项列表，并将每个选项的值分配给 value 属性。

滑块

滑块允许用户从一组可能的值中选择一个滑块值。在 Angular Material 中，滑块使用 mat-slider 组件实现。

<mat-slider [(ngModel)]="sliderValue" [min]="1" [max]="10"></mat-slider>

在上面的示例中，mat-slider 绑定到滑块值并管理其值，min 和 max 属性指定滑块范围。

日期选择器

日期选择器允许用户选择一个日期。在 Angular Material 中，日期选择器使用 mat-datepicker 组件实现。

<mat-form-field>
  <input matInput [matDatepicker]="picker" [(ngModel)]="selectedDate">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

在上面的示例中，mat-datepicker 绑定到选择的日期并管理其值，mat-datepicker-toggle 用于切换日期选择器的显示状态。