Инициализация переменной в HTML5 для тега Input

Question

Вот HTML-код страницы, которая загружает массив продуктов:

<div class="container" *ngFor="let product of products">
  <div class="product">
    <div class="img-container">
      <img
        //image url
    </div>
    <div class="product-info">
      <div class="product-content">
        <h1>{{product.name}}</h1>
        <p>{{product.description}}</p>
        <p>Price: {{product.price}} $</p>
        <p>Quantity:
          <button type="button" class="btn btn-danger" (click)="minusQuantity(product)">-</button>
          <input type="number" class="input-quantity" [(ngModel)]="product.count"/>
          <button type="button" class="btn btn-success" (click)="plusQuantity(product)">+</button>
        <div class="buttons">
          <a class="button add" (click)="addToCart(product)">Add to Cart</a>
        </div>
      </div>
    </div>
  </div>
</div>

Когда страница загружена, числовой ввод пуст (значение не видно внутри). Следовательно, нажатие кнопок - и + для вызова minusQuantity() и plusQuantity() не влияет на product.count и не отображает его на странице.

Я пытался установить значение по умолчанию, но оно переопределяется ngModel. Если я использую только значение без ngModel, то ввод не реагирует ни на какие изменения, вызванные кнопками - / + (так как это просто жестко закодированная "1").

Но если я введу, например, «1» вручную на входе, затем кнопки «+» и «-» работают, так как есть предоставленное значение, и оно работает нормально.

Вопрос:

Как избежать этой проблемы? Есть ли способ инициализировать тип ввода с некоторым значением, а затем правильно передать его в product.count? Или подход должен быть совершенно другим?

Фрагменты компонентов, которые обрабатывают +/- методы:

product.component.ts

plusQuantity(product: ProductModel) {
   if (product.count < 99) {
     this.cartService.increaseQuantity(product);
   }
 }

 minusQuantity(product: ProductModel) {
   if (product.count > 1) {
     this.cartService.decreaseQuantity(product);
   }
 }

cartService.ts

increaseQuantity(product: ProductModel) {
    product.count = product.count + 1;
    this.orderElement.quantity = product.count + 1;
    return product.count;
}

decreaseQuantity(product: ProductModel) {
    product.count = product.count - 1;
    this.orderElement.quantity = product.count - 1;
    return product.count;
}

Answer 1

Используйте файл JavaScript с кодом:

function plusQuantity(product) {
product = ProductModel;
if (product.count < 99) {
this.cartService.increaseQuantity(product);
}
}
function minusQuantity(product) {
product = ProductModel;
if (product.count > 1) {
this.cartService.decreaseQuantity(product);
}
}

Тогда это может сработать!