如何使用Angular Material实现数字微调器（Number Spinner）？

Angular Material 官方没有提供独立封装的数字微调器（Number Spinner）组件，你使用type="number"配合matInput的写法本身是支持的，出现渲染异常可以按以下步骤排查解决：

• 先确认模块导入完整：Angular 12 对应的 Angular Material 版本为 v12.x，需要确保你在当前组件所属的模块中同时导入了MatFormFieldModule和MatInputModule，缺漏导入是组件不渲染的最常见原因。同时要保证 Angular 核心依赖和 Angular Material 依赖的大版本号完全一致，跨版本混用依赖也会导致渲染异常。
• 检查是否有全局样式隐藏了原生微调按钮：很多样式重置规则会默认隐藏input[type=number]的上下箭头，你可以添加以下全局样式强制显示原生微调器：

/* 适配Chrome、Safari等Webkit内核浏览器 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: inner-spin-button !important;
  opacity: 1;
}
/* 适配Firefox浏览器 */
input[type="number"] {
  -moz-appearance: number-input;
}

• 如果需要更符合 Material Design 设计规范的自定义微调器，也可以自行在输入框前后加按钮实现，不需要引入第三方依赖：

<mat-form-field appearance="fill">
  <mat-label>Slab</mat-label>
  <input 
    type="number" 
    matInput 
    formControlName="value"
    min="0" 
    max="100"
  >
  <button mat-icon-button matSuffix (click)="form.get('value').setValue(form.get('value').value + 1)">
    <mat-icon>arrow_drop_up</mat-icon>
  </button>
  <button mat-icon-button matSuffix (click)="form.get('value').setValue(form.get('value').value - 1)">
    <mat-icon>arrow_drop_down</mat-icon>
  </button>
</mat-form-field>

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