您的位置:首页 > Web前端 > AngularJS

angular2中循环遍历再增加一组数组可以删除可以增加

2017-05-22 00:00 260 查看

html:

<tr>
<th class="align-center"><input type="checkbox"></th
<th class="align-center">供应商SKUID</th>
<th class="align-center">SKU名称</th>
<th class="align-center">参考价</th>
<th class="align-center">进价</th>
<th class="align-center">进价折扣</th>
<th class="align-center">供应状态</th>
<th class="align-center">累计采购</th>
<th class="align-center">销量</th>
<th class="align-center" style="width:10%;">删除</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let sku of  mod_supplierSkuList">
<td class="align-center" ><input type="checkbox" (click)="select(sku)"></td>
<td class="align-center"><input type="text" [(ngModel)]="sku.supplierSku"               class="td-width"/></td>
<td class="align-center"><input type="text" [(ngModel)]="sku.supplierName"   style="border:none"></td>
<td class="align-center"><input type="text" [(ngModel)]="sku.referencePrice" class="td-width"></td>
<td class="align-center"><input type="text" [(ngModel)]="sku.purchasePrice" class="td-width"></td>
<td class="align-center"><input type="text" [(ngModel)]="sku.discount" class="td-width"></td>
<td class="align-center"><input type="text" [(ngModel)]="sku.supplierStatus" class="td-width"></td>
<td class="align-center"><input type="text" [(ngModel)]="sku.purchaseCount" class="td-width"></td>
<td class="align-center"><input type="text" [(ngModel)]="sku.sales" class="td-width"></td>
<td class="align-center">
<span class="info-work-minus" (click)="minusWorkHis(sku.index)"  style="cursor:pointer">-              </span>
<!--<span class="info-work-minus info-work-plus" (click)="addSku()" [class.hidden]="! (sku.index == mod_supplierSkuList.length)" style="cursor:pointer">+</span>-->
</td>

</tr>
<tr> // 这一组一出现的时候就是一个空数组
<td class="align-center" ><input type="checkbox"></td>
<td class="align-center"><input type="text" class="td-width" [(ngModel)]="mod_supplierSku"/>
</td>
<td class="align-center">
<input type="text" style="border:none" [(ngModel)]="mod_supplierName">
</td>
<td class="align-center">
<input type="text" class="td-width" [(ngModel)]="mod_referencePrice">
</td>
<td class="align-center"><input type="text" class="td-width" [(ngModel)]="mod_discount"> </td>
<td class="align-center">
<input type="text" class="td-width" [(ngModel)]="mod_purchasePrice">
</td>
<td class="align-center">
<input type="text" class="td-width" [(ngModel)]="mod_purchaseCount">
</td>
<td class="align-center">
<input type="text" class="td-width" [(ngModel)]="supplierStatus">
</td>
<td class="align-center">
<input type="text" class="td-width" [(ngModel)]="mod_sales">
</td>
<td class="align-center">
<!--<span class="info-work-minus" (click)="minusWorkHis(sku.index)" style="cursor:pointer">-</span>-->
<span class="info-work-minus info-work-plus" (click)="addSku()" style="cursor:pointer">+</span>
</td>
</tr>
### ts:
删除当前的数组的一行
//删除
private minusWorkHis(skuIndex: any): void {

this.logger.log("删除下标");
this.logger.log(skuIndex);
this.logger.log(this.mod_supplierSkuList);
this.mod_supplierSkuList.splice(this.mod_supplierSkuList.indexOf(skuIndex),1);

}
//增加  先要初始化参数 然后在http请求的返回数组中 动态添加index

private i: number = 1;
private index:number = 1;
private mod_discount: any;
private mod_purchaseCount: any;
private mod_purchasePrice: any;
private mod_referencePrice: any;
private mod_sales: any;
private mod_supplierName: any;
private mod_supplierSku: any;
private mod_supplierStatus: any;
//这个就是动态添加index
for(let list of this.mod_supplierSkuList){

list.index = index++;
}
// this.logger.log("----"+(this.mod_supplierSkuList.length-1));
// if(
//     this.mod_discount == null ||
//     this.mod_purchaseCount == null ||
//     this.mod_purchasePrice==null ||
//     this.mod_referencePrice==null ||
//     this.mod_sales == null ||
//     this.mod_supplierName ==null||
//     this.mod_supplierSku ==null ||
//     this.mod_supplierStatus == null
// ){
//
//     alert("请求参数不能为空");
//
//
// }else{

let add_work = {

index:this.index++,
discount: this.mod_discount,
purchaseCount: this.mod_purchaseCount,
purchasePrice: this.mod_purchasePrice,
referencePrice:,
sales: this.mod_sales,
supplierName: this.mod_supplierName,
supplierSku: this.mod_supplierSku,
supplierStatus: this.mod_supplierStatus

};

this.mod_supplierSkuList.push(add_work);
this.logger.log(this.mod_supplierSkuList);
// }

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  删除 添加一行
相关文章推荐