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);
}
}

然后它可能会起作用！