CODEWITHSUNDEEP
angulareditangular2-templateangular2-forms
Aarsh
Aarsh

Reputation: 2595

On edit click All the item is being editable instead of particular item

This is my html code ...

<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>

This is my component code ...

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

On edit click all the item is being editable instead of one particular item. I seen other solutions but it didn't work for me

Upvotes: 0

Views: 67

Answers (1)

Veena K. Suresh
Veena K. Suresh

Reputation: 1002

Try this. Add one more key value pair in your product array - 'editClick' with initial value 'false'. So all the items will be initially false.

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

In your html, pass the clicked item to the edit function

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

In your component, find the index of the clicked item in the array and change the value of editClick to true

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

In your html instead of *ngIf="editClick", use *ngIf="pro.editClick". Hope this helps.

Upvotes: 1

Related Questions