购物车中每件商品的动态编辑表单

Question

我希望用户能够编辑购物车中商品的数量，而无需打开新页面或对话框。购物车中显示的数量应该变成一个下拉菜单，用户应该能够选择他们喜欢的数量。如果他们想要的数字不在下拉列表中，他们还应该可以选择自定义金额。

问题是我不知道在任何给定时间购物车中有多少商品，并且用户可以一次编辑多个商品，但只有一个编辑表单，因此对一个商品的更改最终会影响其他商品也在编辑中。

我的 html 代码如下所示：

<form class="in-cart" *ngFor="let item of items" [formGroup]="editForm">
...
    <div class="cart__quantity">
        <div *ngIf="item.Edit == false">
            {{item.Quantity}}
        </div>
        <mat-form-field *ngIf="item.Edit == true">
             <select matNativeControl [formControl]="editForm.controls.itemQuantity">
                <option *ngFor="let quantity of item.Quant" [ngValue]="quantity">
                    {{quantity}}
                </option>
            </select>
        </mat-form-field>
        <!-- custom quantity -->
        <mat-form-field  *ngIf="editForm.controls.itemQuantity.value == 0">
            <input matInput [formControl]="editForm.controls.itemQuantityCustom"/>
        </mat-form-field>
    </div>
    ...
    <div class="cart__actions">
        <a (click)="editInCart(item)" *ngIf="item.Edit == false">Edit</a>
        <a (click)="cancelEdit(item)" *ngIf="item.Edit == true">Cancel Edit</a>
        <a (click)="saveEdit(item)" *ngIf="item.Edit == true">Save Edit</a>
        <a (click)="removeFromCart(item)">Remove</a>
    </div>
</form>

即使其中一个下拉列表选择“其他”选项，自定义数量输入字段也会出现在购物车中的每件商品下方。我试图让它仅针对正在编辑的特定项目显示。

Answer 1

如果您想同时编辑多个项目，您需要一个 FormArray 或 FormGroups 数组

使用 FormGroups 数组

//You declared the array
editForm:FormGroup[]=[];

您的 .html

<!--see that use formControlName not formControl-->
<form class="in-cart" *ngFor="let item of items;let i=index" [formGroup]="editForm[i]">
   ....
   <mat-form-field *ngIf="item.Edit == true">
      a!--better use formControlName
      <select matNativeControl formControlName="itemQuantity">
           ...
      </select>
   <mat-form-field>
     <!--use editForm[i] to access the value-->
   <mat-form-field  *ngIf="editForm[i].controls.itemQuantity.value == 0">
       <input matInput formControlName="itemQuantityCustom"/>
   </mat-form-field>
   <!--pass the "index" to your function
   <a (click)="editInCart(item,i)" *ngIf="item.Edit == false">Edit</a>
   ...
</div>

还有函数editInCart

editInCart(item:any,index:number)
{
   this.editForm[index]=new FormGroup({
       itemQuantity:new FormControl(item.itemQuantity),
       itemQuantityCustom:new FormControl(item.itemQuantity),
   })
}