Угловой 7 пользовательский входной счетчик - PullRequest
Новая
       28

Угловой 7 пользовательский входной счетчик

0 голосов
/ 13 февраля 2019

Я новичок в Angular и хотел бы знать следующее: Есть ли способ сделать входной счетчик как на картинке?Он должен автоматически считать / уменьшать значение поля ввода, если кнопка остается нажатой, и останавливаться, когда я ее отпускаю.Как и в случае с обычным входным блесном html, когда я устанавливаю свойство типа на «число».

Я использую 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>

1 Ответ

0 голосов
/ 13 февраля 2019

вместо добавления 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, равной двумпуть связан.

...