如何在递增和递减按钮之间正确显示计数器结果

Question

我正在学习 Angular，我创建了一个组件 quantity-component。在quantity-component.component.html中，将有两个按钮用于递增+和递减-，只有当计数器值> 0时才启用递减。

当我点击+时，计数器开始增加，当我点击-时减少。

我正在正确地增加和减少计数器，但没有正确地获得设计。

我需要它：

但我是这样的：

以下是我的 .html 和 .ts 代码

HTML 代码

<div>
  <h2>Quantity Selector</h2>
  <div class="input-group">
    <span class="input-group-btn">
      <button type="button" class="btn btn-danger" (click) = "onDecrement()" [disabled]="counter <= 0"
      data-type="minus" data-field="quant[2]">
        <span class="glyphicon glyphicon-minus"></span>
      </button>
      <input type="text" name="quant[2]" class="form-control input-number" value="{{this.counter}}" >
    </span>
    <span class="input-group-btn">
      <button type="button" class="btn btn-success"  (click)= "onIncrement()" data-type="plus" data-field="quant[2]">
          <span class="glyphicon glyphicon-plus"></span>
      </button>
  </span>
  </div>

</div>

TS 代码

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-quantity-component',
  templateUrl: './quantity-component.component.html',
  styleUrls: ['./quantity-component.component.css']
})
export class QuantityComponentComponent implements OnInit {

  counter: number = 0;

  constructor() { }

  ngOnInit(): void {
  }

  onDecrement() {
    this.counter -= 1;
    return this.counter;
  }

  onIncrement() {
    this.counter += 1;
    return this.counter;
  }


}

Answer 1

您应该在输入标签中添加text-center 类：

<input type="text" name="quant[2]" class="form-control input-number text-center" value="{{this.counter}}" >