上推阵列对象时复选框被选中，并且当复选框在角6被取消选中删除对象

Question

我是新来的角6。

我试图处理推基于一个复选框是否被选中与否数组删除对象。所以我成功推对象数组，但我怎样才能从数组中删除同一个对象时，我取消选中该复选框？我也用formArray。

HTML代码这里

<form [formGroup]="editCategoryForm" > 
          <div class="form-group">
                  <mat-form-field>
                      <input matInput placeholder="Name"  formControlName="name" >
                  </mat-form-field>
              </div>
          <div formArrayName="categoryArray" >  
            <fieldset *ngFor="let address of editCategoryForm.controls.categoryArray['controls']; let i = index" >
              <div [formGroupName]="i" >
                  <div class="form-group">
                        <mat-form-field>
                          <input matInput placeholder="Label" formControlName ="label"  required>
                        </mat-form-field>
                   <br/>
                        <div class="check-box" *ngFor="let data of measurementData">
                              <input type="checkbox" (change)="onChange(i,data._id,data.name, $event.target.checked)" [checked]="inputChecked(i,data)" > {{data.name}}
                        </div> 
                        <div class="col-sm-1">
                            <button mat-mini-fab color="warn" *ngIf="editCategoryForm.controls.categoryArray['controls'].length > 1" title="Remove Fields" (click)="removeLair(i)">x</button>     
                        </div>

                  </div>
                </div>
            </fieldset> 
            <br/>
            <div class="form-group">
              <button mat-raised-button color="accent" (click)="addNew()">Add Measurement</button>
            </div>
            <div class="form-group">
                  <button style="float: right;margin: 29px;"  mat-raised-button color="primary" (click)="submitdata()">Submit</button>          
            </div>  
            </div>
        </form>

TS代码这里

onChange(index: number, _id: string, name: string, isChecked: boolean) {

    if (isChecked) {
      this.editCategoryForm.controls.categoryArray.value[index].measurements.push({ id: _id, name: name });
    } else {
      this.editCategoryForm.controls.categoryArray.value[index].measurements.pop({ id: _id, name: name });
    }
  }

下面是一个例子Stackblitz demo.This不能正常从去年工作的删除对象。

Answer 1

尝试这个，

HTML：不是传递每个字段的，通过整个对象

<input type="checkbox" (change)="onChange(i,data, $event.target.checked)" [checked]="inputChecked(i,data)" >

TS：使用splice()代替pop()的

onChange(index: number, data:{_id:string,name:string}, isChecked: boolean) {
    if (isChecked) {
      this.editCategoryForm.controls.categoryArray.value[index].measurements.push(data);
    } else {
      this.editCategoryForm.controls.categoryArray.value[index].measurements.splice(this.editCategoryForm.controls.categoryArray.value[index].measurements.indexOf(data),1);
    }
}

Answer 2

您曾使用pop方法将总是从你的数组中删除最后一个元素。如果你想从你的数组中删除特定的元素，然后使用拼接方法。请试试这个

onChange(index: number, _id: string, name: string, isChecked: boolean) {

    if (isChecked) {
      this.editCategoryForm.controls.categoryArray.value[index].measurements.push({ id: _id, name: name });
    } else {
      this.editCategoryForm.controls.categoryArray.value[index].measurements.splice(index, 1);
    }
  }

Answer 3

代替pop你可以尝试filter因为流行总是会从最后删除元素，但通过过滤器，我们可以根据条件进行筛选。

 onChange(index: number, _id: string, name: string, isChecked: boolean) {
        if (isChecked) {
this.editCategoryForm.controls.categoryArray.value[index].measurements.push({ id: _id, name: name });
        } else {
    //this.editCategoryForm.controls.categoryArray.value[index].measurements.pop({ id: _id, name: name });
    this.editCategoryForm.controls.categoryArray.value[index].measurements=this.editCategoryForm.controls.categoryArray.value[index].measurements.filter(item=>_id!==item.id);
        }
      }

这里是stackblitz