【问题标题】:Creating a Number Spinner with Angular Material?使用 Angular 材质创建数字微调器?
【发布时间】:2021-06-17 17:25:54
【问题描述】:

Angular Material 有数字微调器吗?我试过这个demo from this question


<mat-form-field>
    <input
      type="number"
      class="form-control"
      matInput
      name="value"
      placeholder="Slab"
      formControlName="value">
  </mat-form-field>

但它不渲染。我打算创建一个 Stackblitz,但它不适用于 Angular 12。

想法?

【问题讨论】:

    标签: html angular angular-material


    【解决方案1】:

    它只适用于 .css。您将两个按钮 mat-icon-button 包含在包装器 div matSuffix 中

    一个例子(免责声明,我真的不太擅长css,很确定有更好的方法来获得同样的效果

    .wrapper-indicator{
      position:relative;
      height:1.5rem;
      width:1.5rem;
      overflow:none;
    }
    .wrapper-indicator .up,.wrapper-indicator .down{
      position:absolute;
      right: 0;
      font-size:.5em;
      height: 1.25rem!important;
      width: 1.25rem!important;
    }
    .wrapper-indicator .up{
      top:-.25rem;
    }
    .wrapper-indicator .down{
      top:1rem;
    }
    

    并使用

      <mat-form-field appearance="fill" floatLabel="always">
        <mat-label>Amount</mat-label>
        <input matInput type="number" class="example-right-align" placeholder="0">
        <div matSuffix class="wrapper-indicator">
          <button class="up" mat-icon-button >
            <mat-icon>expand_less</mat-icon>
          </button>
          <button class="down" mat-icon-button >
            <mat-icon>expand_more</mat-icon>
          </button>
        </div>
      </mat-form-field>
    

    更新 mat-input 直接创建一个微调器是你使用 type="number"。奇怪,当我输入时不显示“微调器”。看看github中的代码,“类型”是@Input,所以想象一下在旧版本的Angular中几乎需要写type="number" after matInput

    【讨论】:

    • 嗯...我正在考虑使用滑块代替...在查看演示时...他们在演示滑块的对话框中呈现了数字微调器...material.angular.io/components/slider/examples
    • @Ole,真的很“奇怪”,我试图得到一个解释并写成更新,但我真的不太确定这是原因(此外,我只是一个堆栈闪电战,如果你把type="number"放在前面:(
    【解决方案2】:

    现在可以了。我不确定我到底改变了什么......:

    
    <mat-form-field>
        <input
          type="number"
          class="form-control"
          matInput
          min="1" 
          max="5"
          name="value"
          placeholder="Select a Number Between 1 and 5"
          formControlName="value">
      </mat-form-field>
    

    【讨论】: