Question

这是我的HTML代码......

CREATE VIEW planView  
    SELECT 
        planID, planName, cost, quota, maxSpeed, shapedSpeed, a.typeID, typeName  
    FROM 
        Plans AS p 
    LEFT OUTER JOIN 
        accessType AS a ON p.typeID = a.typeID;  
GO

这是我的组件代码......

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

在编辑时，单击所有项目均可编辑而不是一个特定项目。我看到了其他解决方案，但它并没有为我工作

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的值更改为true

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

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

在编辑时单击所有项目均可编辑而不是特定项目

1 个答案: