Question

在我的应用程序中，数据来自具有嵌套数组的服务器，但是没有用于检查复选框是否选中的字段，因此我使用foreach循环添加了该字段。即使此字段为true或false，此字段也无效。我的代码如下。

ng-if

用于输入的html代码是

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

如果所有元素的属性isChecked为true，则不会对其进行检查。请帮忙。

Answer 1

在有角度的情况下，应将其写为[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复选框已根据数据检查状态

3 个答案: