Angular 5 个复选框从数据中选中状态

Question

在我的应用程序中，数据来自带有嵌套数组的服务器，但没有用于检查复选框是否被选中的字段，因此我使用 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 对所有元素都为真，但它们未被检查。请帮忙。

Answer 1

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

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

Answer 2

如果 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

Answer 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()
    }
  }
}

Angular 5 个复选框从数据中选中状态

Angular 5 checkbox checked status from data

javascript

typescript

angular

angular5