Question

我有类似的模型课：

processAnexOne.ts

export class ProcessAnexOne {


    documentList: string;
}

以及我已经声明的内部组件类

export class ProcessAnexOneComponent implements OnInit {

processAnexOne: ProcessAnexOne = new ProcessAnexOne();

 }

我遇到的问题是它的HTML文件。我有三个复选框，但是当我单击一个复选框时，所有三个复选框都被选中。我不知道我的代码有什么问题。我只需要选中一个复选框即可。

<div class="form-group col-md-12"> 
  <div class="col-md-4 panel panel-default">
     <h3>Document List</h3>
 <div class="form-check">
  <label class="form-check-label" for="check1">
    <input type="checkbox" class="form-check-input" id="check1" name="option1" value="something" [(ngModel)]="processAnexOne.documentList" >Option 1
  </label>
</div>
<div class="form-check">
  <label class="form-check-label" for="check2">
    <input type="checkbox" class="form-check-input" id="check2" name="option2" value="something" [(ngModel)]="processAnexOne.documentList">Option 2
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" [(ngModel)]="processAnexOne.documentList">Option 3
  </label>
</div>

Answer 1

三个复选框绑定到同一模型：

[(ngModel)]="processAnexOne.documentList"

Answer 2

您的实现无法正常工作，因为您所有的复选框都绑定到相同的模型（字符串）：

[(ngModel)]="processAnexOne.documentList"

此answer provides a solution to your problem

Answer 3

从您的问题中我了解到，其中一个值被推入 processAnexOne.documentList变量

html：

<div class="form-group col-md-12"> 
    <div class="col-md-4 panel panel-default">
       <h3>Document List</h3>
   <div class="form-check">
    <label class="form-check-label" >
      <input type="checkbox" class="form-check-input" (click)="onUserCheck('Option 1')" value="processAnexOne['documentList']" name="documentList" [checked]="'Option 1'== processAnexOne['documentList']" value="something"  >Option 1
    </label>
  </div>
  <div class="form-check">
    <label class="form-check-label" >
      <input type="checkbox" class="form-check-input" (click)="onUserCheck('Option 2')"  value="processAnexOne['documentList']" name="documentList" [checked]="'Option 2'== processAnexOne['documentList']" value="something" >Option 2
    </label>
  </div>
  <div class="form-check">
    <label class="form-check-label">
      <input type="checkbox" name="documentList" (click)="onUserCheck('Option 3')" value="processAnexOne['documentList']" class="form-check-input"  [checked]="'Option 3'== processAnexOne['documentList']" >Option 3
    </label>
  </div>

ts：

@Component({
  selector: 'app-checkbox',
  templateUrl: './checkbox.component.html',
  styleUrls: ['./checkbox.component.scss']
})
export class CheckboxComponent implements OnInit {

  processAnexOne: ProcessAnexOne;

  constructor() {
    this.processAnexOne = new ProcessAnexOne();
  }

  ngOnInit() {
  }


  public onUserCheck(value){
    this.processAnexOne['documentList'] = value;
  }
}


export class ProcessAnexOne {
  documentList: string;  
}

希望有帮助

在角度6中选中了所有复选框

3 个答案: