При редактировании нажмите Все элементы, которые можно редактировать вместо определенного элемента.

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

Попробуй это. Добавьте еще одну пару ключ-значение в ваш массив продуктов - 'editClick' с начальным значением 'false'. Таким образом, все предметы будут изначально ложными.

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 к истине

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

В вашем HTML вместо *ngIf="editClick"использовать *ngIf="pro.editClick", Надеюсь это поможет.