Question

这是使用Angular 5

从html代码生成的购物车页面示例

 <div *ngFor="let cart of carts; let i=index" class="panel" 
    id="product-panel">

  //some other lines

 <div class="panel-foot col-xs-12">    
        <div class="col-md-8 btns-group">
          <button   type="button" class="btn btn-default col-md-3 col-xs-12">
            <i class="fa fa-trash-o"></i> Remove</button>
          <button  type="button" class="btn btn-primary col-md-3 col-xs-12">
            <i class="fa fa-shopping-cart"></i> checkout</button>
          <button (click)="edit(i)" type="button" class="btn btn-success col-md-3 col-xs-12">
            <i class="fa fa-refresh"></i> Edit</button>
        </div>

        <div class="col-md-4">
            <div class=" qty  col-xs-12">  

              <input [disabled]="!disable" id="qty-number" type="number" value="{{quantity}}" class="float-right col-md-3 col-xs-8 ">
               <div class="float-right plus-minus">
                 <div class="plus" (click)="plus()">
                   <i class="fa fa-plus"></i>
                 </div>

                 <div class="minus" (click)="minus()">
                   <i class="fa fa-minus"></i>
                 </div>
               </div>

             </div>
        </div>

      </div>
</div>

默认情况下qty1＆amp; qty2被禁用我希望当用户点击编辑商店时，第一个产品只有qty1启用，因此一个。我尝试了很多方法，但所有数量都已启用

我怎么能这样做？

Answer 1

将我的评论移至实际答案以添加一段代码。变量disabled和变量quantity目前在您的所有购物车中共享。为避免这种情况，您必须将购物车类定义为

export class Cart {
    quantity: number;
    qtyDisabled: boolean;
    // other fields

    constructor() {
        this.quantity = 15;
        this.qtyDisabled = true;
    }
}

并在您的模板中使用它

<div *ngFor="let cart of carts">

    <button (click)="edit(cart)"> Edit </button>
    <input [disabled]="cart.qtyDisabled" [(ngModel)]="cart.quantity" />
</div>

这样，购物车的每个实例都有自己的禁用和值属性。我还建议您在角度模板中使用NgModel双向绑定https://angular.io/api/forms/NgModel来将输入值更改绑定到购物车模型。

如何使用Angular 5启用特定输入字段

1 个答案: