Question

我正在开发一个食品配送应用程序，其中很少有项目可以自定义该项目。其中很少有复选框，很少有单选按钮。我有一个功能，可以检查是否已选中复选框或在一个功能中选择了单选按钮。现在，我想要的是取消选中数组中的复选框后如何删除特定的自定义项目。

我尝试使用arrayname.pop（ItemId，CustomItemId，data），但它只是删除数据，而不是itemid或customitemid。我试图对选定项目的索引使用splice，但输出没有差异。

我的功能在下面。

selectCat(data,index){
    console.log("From CheckBox Before",data);
    const checked = data.checked;
    if (checked || this.customItems) {

      this.itemID = localStorage.getItem("ForDisplayItemID");
      console.log("this.itemID",this.itemID);
      this.gotta = this.selectedArrayCust.push(this.itemID,"~",data.CUSTOMDATID,data);

      localStorage.setItem('customiseDataStorage',this.selectedArrayCust);
      this.gotta = localStorage.getItem('customiseDataStorage');
      console.log('Checking array Checkbox side',this.gotta);
       var checkValue = data.RATE;
       var add  =  this.modalTotal;
       add = Number.parseInt(add.toString()) + Number.parseInt(checkValue.toString());
          this.modalTotal = add;
     localStorage.setItem("modalTotal",this.modalTotal);
     } else {
      var i = this.selectedArrayCust.indexOf(data);
      console.log("Console index else part",i)
      this.selectedArrayCust.splice(index);
      console.log("Else remove check",data.RATE);
      var checkValue = data.RATE;
      var sub  =  this.modalTotal;
      sub = Number.parseInt(sub.toString()) - Number.parseInt(checkValue.toString());
      this.modalTotal = sub;

     localStorage.setItem("modalTotal",this.modalTotal);
      let newArray = this.selectedArrayCust.filter(function(el) {
        return el !== data;
     });
      this.selectedArrayCust = newArray;

    }
    console.log("From CheckBox After",this.selectedArrayCust);
    console.log("CheckBox",data.RATE);
   }

这是我的html文件：

 <ion-list *ngFor = "let title of data" >
      <ion-row  radio-group name="customItems" [(ngModel)]="customItems">
        <ion-item>
          <p>{{title.CUSTOMNAME}}</p>
        </ion-item> 
        <ion-col *ngIf = 'title.TYPE !== "INC";else checkb'>
          <div  *ngFor = "let customItems of title?.DET; let i = index;">
          <ion-item>

            <ion-label>{{customItems.CUSTOMDATNAME}}</ion-label>
            <ion-radio (ionSelect)="selectCat(customItems,i)" [value]="customItems" checked={{selected}}
            ngDefaultControl></ion-radio>
            <ion-label>&#x20a8; {{customItems.RATE}}</ion-label>
          </ion-item>
        </div>
        </ion-col>
        <ng-template #checkb>
            <ion-col>
                <ion-item  *ngFor = "let customItems of title?.DET; let i = index">
                    <ion-label>{{customItems.CUSTOMDATNAME}}</ion-label>
                    <ion-checkbox [(ngModel)]="customItems.checked" (ngModelChange)="selectCat(customItems,$event,i)"></ion-checkbox>
                    <ion-label>&#x20a8; {{customItems.RATE}}</ion-label>
                </ion-item>
              </ion-col>
        </ng-template>
      </ion-row>

    </ion-list>
    <ion-item>
      Total <span slot="end">{{modalTotal}}</span>
    </ion-item>
    <ion-buttons end>
        <button ion-button (click) = "submitCustomisation()">
          Save
        </button>
      </ion-buttons>

推送元素后得到的输出是

[“ 9”，“〜”，“ 28”，{…}，“ 9”，“〜”，“ 26”，{…}，“ 9”，“〜”，“ 27”，{… }]

其中9是ItemId〜是分隔符28,26,27是customItemId，{....}是自定义项目的数据。

从数组中删除一个元素后，我想要的输出看起来像是半球形。如果我未选中CustomId 27，则输出应为：

[“ 9”，“〜”，“ 28”，{…}，“ 9”，“〜”，“ 26”，{…}]

在ionic 3中取消选中复选框时如何从阵列中删除特定数据

0 个答案: