javascript - 我们如何在 Angular 6 中检查数组中的一些复选框

Question

我有一个用于编辑数据的表单。其中有一些复选框。我从数据库中获取先前选择的复选框数组[]，我想选中编辑配置文件表单中选中的那些复选框。当我们编辑页面时。

app.component.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)"  > {{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>

我用它来捕获测量值数组。数据库中的内容:

this.category = {
    "_id":"5c4b0d6918f72032c0569004",
    "name":"categorytest",
    "measurements": [{
        "measurements": [
            {"name":"Chest","id":"5c4ac1c4da2dfe251aeee037"},
            {"name":"Stomach","id":"5c4ac1d6da2dfe251aeee038"},
            {"name":"Hip","id":"5c4ac1dbda2dfe251aeee039"},
            {"name":"Length","id":"5c4ac201da2dfe251aeee03c"}
        ],
        "label":"testfff"
    },
    {
        "measurements":[{"name":"Chest","id":"5c4ac1c4da2dfe251aeee037"}],
        "label":"httt"
    }]
}

app.component.ts 文件:

this.https.post<any>('api/category/details', data).subscribe(response => {
    this.category = response.category;
    this.editCategoryForm.controls['name'].setValue(this.category.name);
    console.log(this.category);
    console.log(this.category.measurements.length);

    for (let i = 0; i < this.category.measurements.length; i++) {
        if (i !== 0) {
            const control = <FormArray>this.editCategoryForm.controls['categoryArray'];
            control.push(this.getData());
        }
        this.categoryArray.at(i).get('label').setValue(this.category.measurements[i].label);
    }
});

Here is a Stackblitz demo.

Answer 1

  inputChecked(i,data){
    let checked = false;
    //console.log(this.category.measurements[i].measurements);
    //console.log('data = ', data);
    for (let l = 0; l < this.category.measurements[i].measurements.length; l++){
      let temp = this.category.measurements[i].measurements[l];
      //console.log('inside =',temp);
     if (temp.name == data.name && temp.id == data._id){
       checked = true;    } 
    }
    return checked;
  }

将上述内容放入您的 ts 文件中，然后在 html 文件中像这样引用它:

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