Angular 5复选框从数据中检查状态答案

【问题标题】：Angular 5 checkbox checked status from dataAngular 5复选框从数据中检查状态
【发布时间】：2018-12-15 05:16:25
【问题描述】：

在我的应用程序中，数据来自具有嵌套数组的服务器，但没有用于检查复选框是否选中的字段，因此我使用 foreach 循环添加了该字段。这个字段不管是真还是假都没有效果。我的代码如下。

this.testservice.getQuestions()
          .subscribe(
          resultArray => {
          this.questions = resultArray;
            this.questions.forEach(element => {
              element.Awnsers.forEach(elementA => {
                elementA.isChekced = true;
              });
            });

输入的html代码是

<div *ngFor='let q of questions'>
<b>Question: </b>
  {{q.Question}}<br><br>
  <div *ngFor='let a of q.Awnsers'>
    <label>
      <input type="checkbox"
             name="options"
             value="{{a.awnsers}}"
             (checked)="a.isChecked"
             (change)="testoption($event, a.Awnser)" />
             {{a.Awnser}}
  </label>
  </div>
 </div>

事件属性 isChecked 对所有元素都为真，但它们不会被检查。请帮忙。

【问题讨论】：

将(checked)='a.isChecked'更改为[checked]='a.isChecked'
模板中的()用于事件绑定，[]用于数据绑定

标签： javascript angular typescript angular5

【解决方案1】：

如果 Angular 版本是 5，那么我会使用 [(ngModel)] 而不是 [checked] 属性，通过使用双向数据绑定，您将获得答案的当前状态，即 checked 或 unchecked。

<input type="checkbox" name="options" value="{{a.awnsers}}" [(ngModel)]="a.isChecked" (change)="testoption(i, a.Awnser)" />

A Working StackBlitz

【讨论】：

【解决方案2】：

angular应该写成[checked]表示数据绑定，修改如下，

  <input type="checkbox" name="options" value="{{a.awnsers}}" [checked]="a.isChecked"  (change)="testoption($event, a.Awnser)" />

【讨论】：

【解决方案3】：

因为动画，我用这种方式。

<input #checkInput type="checkbox" />

export class Component implements AfterViewInit {
  @ViewChild('checkInput', { static: false }) checkInput: ElementRef<HTMLElement>
  @Input() isOpen = false
  
  ngAfterViewInit() {
    if(this.isOpen) {
      this.checkInput.nativeElement.click()
    }
  }
}

【讨论】：