Угловое увеличение или уменьшение количества

Я создаю приложение Angular 5 для отслеживания прибыли. В моем приложении несколько полей ввода.

Если я продам шоколад, я нажму кнопку +, чтобы увеличить счет.

Если я продам вино, то я нажму кнопку + рядом с полем «Вино», чтобы увеличить счет.

Теперь я использовал функцию incrementchoc (), чтобы увеличить количество шоколада, и функцию incrementwine (), чтобы увеличить количество вина.

Вот мой HTML-код ниже:

 <div >
                <label>Chocolate:</label><br>
            <div class="input-group">
              <span class="input-group-btn">
                  <button type="button" class="btn btn-danger btn-number" (click)= "decrementchoc()" data-type="minus" data-field="quant[2]">
                    <span class="glyphicon glyphicon-minus"></span>
                  </button>
              </span>

              <input type="text" name="quant[2]" [(ngModel)]="info.choco" (keyup)="choc(info.choco)" class="form-control input-number" value="{{info.choco}}" >

              <span class="input-group-btn">
                  <button type="button" class="btn btn-success btn-number"  (click)= "incrementchoc()" data-type="plus" data-field="quant[2]">
                      <span class="glyphicon glyphicon-plus"></span>
                  </button>
              </span>
          </div></div>



<div >
                    <label>Wine:</label><br>
                <div class="input-group">
                  <span class="input-group-btn">
                      <button type="button" class="btn btn-danger btn-number" (click)= "decrementwine()" data-type="minus" data-field="quant[3]">
                        <span class="glyphicon glyphicon-minus"></span>
                      </button>
                  </span>

                  <input type="text" name="quant[3]" [(ngModel)]="info.wine" (keyup)="wine(info.wine)" class="form-control input-number" value="{{info.wine}}" >

                  <span class="input-group-btn">
                      <button type="button" class="btn btn-success btn-number"  (click)= "incrementwine()" data-type="plus" data-field="quant[3]">
                          <span class="glyphicon glyphicon-plus"></span>
                      </button>
                  </span>
              </div></div>

Я тоже прикрепляю изображение. Вот как мой HTML выглядит с кнопками - и +

Ниже приведен код моего файла Component.ts

 incrementchoc(){
    this.info.choco= ++this.info.choco;
  }

  decrementchoc(){
    this.info.choco= --this.info.choco;
  }


   incrementwine(){
    this.info.wine= ++this.info.wine;
  }

  decrementwine(){
    this.info.wine= --this.info.wine;
  }

Из приведенного выше кода ясно видно, что если у меня есть n полей ввода, мне придется написать n функций увеличения и уменьшения. Думаю, это сделает приложение очень тяжелым.

Пожалуйста, предложите мне лучший способ сделать это, используя одну функцию для увеличения и уменьшения значений, обнаруживая ngModel ввода и увеличивая / уменьшая только это значение, а не записывая n функций.


angular increment decrement
person node_man    schedule 23.03.2018    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Вы можете выполнять операции увеличения и уменьшения непосредственно в шаблоне компонента. Для этого вам не нужно использовать код компонента.

Например:

<button type="button" class="btn btn-danger btn-number"
        (click)="info.choco = info.choco - 1" data-type="minus" data-field="quant[2]">
    <span class="glyphicon glyphicon-minus"></span>
</button>

Полный код:

<div>
    <label>Chocolate:</label><br>
    <div class="input-group">
        <span class="input-group-btn">
            <button type="button" class="btn btn-danger btn-number"
                    (click)="info.choco = info.choco - 1" data-type="minus" data-field="quant[2]">
                <span class="glyphicon glyphicon-minus"></span>
            </button>
        </span>

        <input type="text" name="quant[2]" class="form-control input-number"
                [(ngModel)]="info.choco" (keyup)="choc(info.choco)" value="{{info.choco}}" >

        <span class="input-group-btn">
            <button type="button" class="btn btn-success btn-number"
                    (click)="info.choco = info.choco + 1" data-type="plus" data-field="quant[2]">
                <span class="glyphicon glyphicon-plus"></span>
            </button>
        </span>
    </div>
</div>

<div>
    <label>Wine:</label><br>
    <div class="input-group">
        <span class="input-group-btn">
            <button type="button" class="btn btn-danger btn-number"
                    (click)="info.wine = info.wine - 1" data-type="minus" data-field="quant[3]">
                <span class="glyphicon glyphicon-minus"></span>
            </button>
        </span>

        <input type="text" name="quant[3]" class="form-control input-number"
                [(ngModel)]="info.wine" (keyup)="wine(info.wine)" value="{{info.wine}}">

        <span class="input-group-btn">
            <button type="button" class="btn btn-success btn-number"
                    (click)="info.wine = info.wine + 1" data-type="plus" data-field="quant[3]">
                <span class="glyphicon glyphicon-plus"></span>
            </button>
        </span>
    </div>
</div>
person Mike Hill    schedule 23.03.2018
comment
Может ли человек просто сделать info.choco++? - person isherwood; 23.03.2018
comment
Операторы увеличения и уменьшения не поддерживаются в шаблонах и приведут к ошибке синтаксического анализа шаблона: angular. io / guide / template-syntax # шаблон-выражения. В документации указано, что операторы присваивания не поддерживаются, но могут быть устаревшими или ограничиваться определенным контекстом. Пользуюсь ими регулярно, без проблем. - person Mike Hill; 23.03.2018
comment
Ах, просто посмотрел немного дальше и нашел различие. Ни операторы увеличения / уменьшения, ни присваивания не разрешены в выражениях шаблона, но назначения разрешены в операторах шаблона (операторы увеличения / уменьшения по-прежнему не разрешены): angular.io/guide/template-syntax#template-statements - person Mike Hill; 23.03.2018
comment
Большое спасибо @MikeHill Ваше решение сработало для меня. Это именно то, что мне нужно. - person node_man; 23.03.2018
comment
Это такое раздражающее ограничение (я пытаюсь найти способ увеличить переменную в двух разных ngFors). - person Katharine Osborne; 28.03.2019

arrow_upward
1
arrow_downward

Да, нынешний подход делает его тяжелым. Вы можете сделать что-то вроде:

increment(value: string) {
  if(value === 'wine') {
      this.info.wine = ++this.info.wine;
    }else if (value === 'choc'){
      this.info.choco= ++this.info.choco;
    }else{
      this.info.gir = ++this.info.gir;
    }
}
<button type="button" class="btn btn-success btn-number"  (click)= "incrementwine(wine)" data-type="plus" data-field="quant[3]">
    <span class="glyphicon glyphicon-plus"></span>
 </button>

то же самое для декремента
* Я не проверял логику кода .. просто рефакторинг.

person Arun    schedule 23.03.2018
comment
Я попробовал ваш код с небольшими изменениями. Выполняется только логика внутри оператора if () {}. Если я нажимаю кнопку + для вина, он увеличивает счетчик для вина, но когда я делаю то же самое для choc, он также увеличивает счет для вина. Пожалуйста, проверьте решение Майка Хилла ниже. У меня это сработало. Ваше решение также полезно, так как мне нужно узнать что-то новое. - person node_man; 23.03.2018
comment
К вашему сведению: я правильно передал параметры, т.е. инкремент (вино) для вина и инкремент (шоколад) для шоколада - person node_man; 23.03.2018