Question

我是Angular的新手，并且想了解以下内容：有没有办法使输入微调器如图所示？如果该按钮保持按下状态，它应该自动递增/递减输入字段的值，放开时停止。与普通的html输入微调器一样，当我将type属性设置为“ number”时。

我将Angular 7用于材料设计

图片： https://drive.google.com/file/d/1XETmC6cyGG42k8C4UYTrZnjFEEeOhHKK/view?usp=sharing

按钮和输入字段的当前代码如下。但是，如有必要，我可以进行任何更改：

          <table>
            <tr>
              <td>
                <button type="button" mat-raised-button (click)="count = count + 1">+
              </button>
              </td>
              <td class="center-input">
                <input matInput name="counter" type="text" size="2" min="0" [(ngModel)]="colony.metMine" readonly required>
             </td>
              <td>
                <button type="button" mat-raised-button (click)="count = count - 1" [disabled]="count < 1">-
                </button>
              </td>
            </tr>
          </table>

Answer 1

不是在（click）事件中添加count=count+1，而是调用一个函数并传递表示递增或递减的参数

yourcomponent.ts

counter(flag){

  if(flag==='increment'){
    this.count++;
  }
  if(flag==='decrement'){
    this.count--;
  }
 this.colony.metMine= this.count;
}

yourcomponenet.html

<table>
        <tr>
          <td>
            <button type="button" mat-raised-button (click)="counter('increment')">+
          </button>
          </td>
          <td class="center-input">
            <input matInput name="counter" type="text" size="2" min="0" [(ngModel)]="colony.metMine" readonly required>
         </td>
          <td>
            <button type="button" mat-raised-button (click)="counter('decrement')" [disabled]="count < 1">-
            </button>
          </td>
        </tr>
      </table>

因此，这基本上是在更新组件类的相同count属性，并在每次更新后都会将count的值分配给两种方式绑定的Colony.metMine变量。

Angular 7自定义输入微调器

1 个答案: