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。此示例无法正常执行其从最后一个删除对象的操作。

Answer 1

您曾经使用过pop方法，该方法将始终从数组中删除最后一个元素。如果要从数组中删除特定元素，请使用splice方法。请尝试

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 2

您可以尝试使用pop代替filter，因为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.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

Answer 3

尝试一下

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

选中复选框时将对象推送到数组上，而未选中角度6中的复选框则删除对象

3 个答案: