复选框未按预期获得 checked/unchecked

Question

我有一个复选框列表，如下所示：

<div class="col-md-4 md-padding-s"  *ngFor="let node of nodeList; let j=index;">
                  <md-checkbox-group>
                    <md-checkbox
                      class="md-h6 row md-padding--xs"
                      name="{{node.FQDN}}"
                      label="{{node.FQDN}}"
                      value="{{node.FQDN}}"
                      required="true"
                      htmlId="filter_label_{{a}}_{{j}}"
                      (ngModelChange)="updateSelection(node)"
                      [formControlName]="servers"
                      [(ngModel)]="node.selected">
                    </md-checkbox>
                  </md-checkbox-group>
                </div>

我的 updateSelection 函数是 .ts 文件是：

  updateSelection(node) {
         console.log('node', node)
        node.selected = node.selected ? false : true;
        if(node.selected) {
          this.serverList.push(node.FQDN);
          this.isServerSelected = true;
        }else{
          this.serverList.pop();
          this.serverList = this.serverList.filter((x, i, a) => a.indexOf(x) == i)
          if(this.serverList.length == 0) {
            this.isServerSelected = false;
            this.alertService.error('Error', 'Please select atleast 1 server', this.alertConfig);
          }
        }
    }

现在，必须根据 node.selected 值选中或取消选中复选框。但是发生的事情是，当我单击复选框文本时，node.selected 值必须根据当前正在发生的 updateSelection 函数进行更改。但是当我点击周围的文本时，复选框没有被选中或取消选中。只有当我点击复选框时，该值才会变得 checked/unchecked。我哪里错了？

Answer 1

您将需要提供对节点对象的新引用以使更改反映在 UI。

 updateSelection(node) {
         console.log('node', node)
        node.selected = node.selected ? false : true;
// here add this 
node = {...node}
        if(node.selected) {
          this.serverList.push(node.FQDN);
          this.isServerSelected = true;
        }else{
          this.serverList.pop();
          this.serverList = this.serverList.filter((x, i, a) => a.indexOf(x) == i)
          if(this.serverList.length == 0) {
            this.isServerSelected = false;
            this.alertService.error('Error', 'Please select atleast 1 server', this.alertConfig);
          }
        }
    }

复选框未按预期获得 checked/unchecked

Checkbox not getting checked/unchecked as expected

checkbox

angular