编辑时单击所有项目都是可编辑的，而不是特定项目

Question

这是我的 html 代码...

<li class="col-xs-12" style="padding-top: 15px;" *ngFor="let pro of product">
                                    <div class="row">
                                        <img src="{{pro.ImageUrl}}" class="img-responsive col-xs-4" />
                                        <div class="col-xs-5">
                                            <a class="cartTxt">{{pro.Name}}</a><br />
                                            <label style="color: #ea4748; font-weight: 100; font-size: 15px;">Rs {{pro.Price}}</label><br />
                                            <h6 style="color: grey; font-size: 12px;">
                                                <span *ngIf="!editClick">Qty : {{pro.Quantity}}</span>
                                                <span *ngIf="editClick"><input type="text" value="{{pro.Quantity}}" /></span>
                                                <br />
                                                <br />
                                                Size :{{pro.Size}}
                                            </h6>
                                        </div>
                                        <div class="col-xs-3">
                                            <a *ngIf="editClick" (click)="update()">Update</a>
                                            <a *ngIf="editClick" (click)="cancel()">Cancel</a>

                                            <button type="button" (click)="edit()" *ngIf="!editClick" style="background-color:transparent;border:none;"><img src="images/edit.svg" class="img-responsive pull-left" style="height: 15px; width: 15px;" /></button>
                                            <img src="images/cross.svg" *ngIf="!editClick" class="img-responsive pull-right" style="height: 15px; width: 15px;" />
                                        </div>
                                    </div>
                                    <!--<div class="clearfix"></div>-->
                                </li>

这是我的组件代码...

ngOnInit(): void {
        this.isUsername = sessionStorage.getItem('username');
        if (this.isUsername != null) {
            this.signin = true;
            this.userN = sessionStorage.getItem('username');
            this.loadCart();
        }
    }

    loadCart() {
        this._loginService.cart().subscribe(res => this.product = res);
    }
    edit() {
        alert("");
        this.editClick = true;
    }

在编辑时单击所有项目而不是一个特定项目是可编辑的。 我看到了其他解决方案，但它对我不起作用

Answer 1

试试这个。在您的产品数组中再添加一个键值对 - 初始值为“false”的“editClick”。所以所有的项目最初都是假的。

this.product.push({
   "ProductId":some product id                      
   "ImageUrl":your Url,
   "Name": your Name,
   "Quantity": your Quantity,
   "editClick":false
});

在您的 html 中，将点击的项目传递给 edit 函数

<button type="button" (click)="edit(pro)" *ngIf="!pro.editClick /></button>

在你的组件中，找到被点击项在数组中的索引，并将editClick的值改为true

edit(productArray: any) {
     let productIndex =  this.product.findIndex(x => x.productId == productArray.productId);
     this.product[productIndex].editClick = true;
    }

在您的 html 中，使用 *ngIf="editClick" 而不是 *ngIf="editClick"。希望这会有所帮助。