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

最新推荐文章于 2020-11-13 17:29:37 发布

weixin_34087307

最新推荐文章于 2020-11-13 17:29:37 发布

阅读量564

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/pingheyongfeng/blog/906633

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

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

}

转载于:https://my.oschina.net/pingheyongfeng/blog/906633