Javascript 如何设置复选框'；通过其更改的eventlistener检查属性

我在angular.js4中有一个矩阵（带有material.angular），其中填充了复选框。当用户单击复选框时，将向后端服务器发送HTTP请求。如果后端服务器不可用或服务调用因任何原因出错，我希望复选框返回到它以前的状态（选中/未选中）。因此，我实现了以下change eventhandler，以根据服务调用的结果进行服务调用和响应：

zuordnungChanged(rolle_id: string, recht_id: string) {
let a = this.zuordnungsmatrix["Rolle_" + rolle_id + "_Recht_" + recht_id];
if (a === true ){
  this.rechtematrix.rechtEntziehen(rolle_id, recht_id).subscribe(() => {
      a = false;
      this.zuordnungsmatrix["Rolle_" + rolle_id + "_Recht_" + recht_id] = a;
      //Notify user
      });
    },
    () => {
      //Notify user
    });
} else {
  this.rechtematrix.rechtVergeben(rolle_id, recht_id).subscribe(() => {
      a = true;
      this.zuordnungsmatrix["Rolle_" + rolle_id + "_Recht_" + recht_id] = a;
      //Notify User
      });
  },
    () => {
      //Notify user
    }
  );
}
}

zuordnungsmatrix变量的定义和填充方式如下：

private zuordnungen: Array<any>;
  private zuordnungsmatrix = [];

erstelleZuordnungsmatrix(): void {
    for (let rolle of this.zuordnungen) {
      for ( let recht of rolle.recht_ids) {
        this.zuordnungsmatrix["Rolle_" + rolle.rolle_id + "_Recht_" + recht] = true;
      }
    }
  }

---

但是我尝试了很多更新复选框，但是没有成功。无论如何，复选框“选中状态”的初始设置工作正常。如何在自己的事件侦听器中更新复选框的状态？

解决方案非常简单：

出于某些原因，Angular不会通过单向绑定更新复选框的更改值。您只需显式地设置

已选中

状态。为此，您可以通过参数

$event

将事件从HTML传递到组件。这在上面的示例中已经完成

在组件中的更改事件处理程序中，您可以读取事件并获取对checkbox元素的引用。然后只需设置此元素的checked属性（

$event.source.checked

）。 问题中的事件处理程序如下所示：

<table td-data-table *ngIf="rechteUndRollenVorhanden()">
      <tr>
        <th td-data-table-column></th>
      <th td-data-table-column *ngFor="let rolle of rollen" [id]="'Rolle_' + rolle.rolle_id">{{rolle.beschreibung}}</th>
      </tr>
      <tr td-data-table-row *ngFor="let recht of rechte" [id]="'Recht_' + recht.recht_id">
        <td td-data-table-cell>{{recht.beschreibung}}</td>
        <td td-data-table-cell *ngFor="let rolle of rollen">
          <md-checkbox [id]="'Rolle_' + rolle.rolle_id + '_Recht_' + recht.recht_id"
                       [checked]="zuordnungsmatrix['Rolle_' + rolle.rolle_id + '_Recht_' + recht.recht_id] ? true : false"
                        (change)="zuordnungChanged(rolle.rolle_id, recht.recht_id, $event)">{{zuordnungsmatrix['Rolle_' + rolle.rolle_id + '_Recht_' + recht.recht_id] ? true : false}}
          </md-checkbox>
        </td>
      </tr>
    </table>

zuordnungChanged(rolle_id: string, recht_id: string, event: any) {
    let a = this.zuordnungsmatrix["Rolle_" + rolle_id + "_Recht_" + recht_id];
    if (a === true ){
      this.rechtematrix.rechtEntziehen(rolle_id, recht_id).subscribe(() => {
          //Happy case
          a = false;
          this.zuordnungsmatrix["Rolle_" + rolle_id + "_Recht_" + recht_id] = a;
          //Notify user
          });
        },
        () => {
          //Bad case
          event.source.checked = this.zuordnungsmatrix['Rolle_' + rolle_id + '_Recht_' + recht_id];
          //Notify user
        });
    } else {
      this.rechtematrix.rechtVergeben(rolle_id, recht_id).subscribe(() => {
          //Happy case
          a = true;
          this.zuordnungsmatrix["Rolle_" + rolle_id + "_Recht_" + recht_id] = a;
          //Notify User
          });
      },
        () => {
          //Bad case
          event.source.checked = this.zuordnungsmatrix['Rolle_' + rolle_id + '_Recht_' + recht_id];
          //Notify user
        }
      );
    }
}

---

请注意，属性设置仅在REST调用失败时完成。这是因为在令人高兴的情况下，复选框会通过用户交互自动更新。

您看过吗？是的，我看过，但您发布的文档是针对angular<2.0的

zuordnungChanged(rolle_id: string, recht_id: string, event: any) {
    let a = this.zuordnungsmatrix["Rolle_" + rolle_id + "_Recht_" + recht_id];
    if (a === true ){
      this.rechtematrix.rechtEntziehen(rolle_id, recht_id).subscribe(() => {
          //Happy case
          a = false;
          this.zuordnungsmatrix["Rolle_" + rolle_id + "_Recht_" + recht_id] = a;
          //Notify user
          });
        },
        () => {
          //Bad case
          event.source.checked = this.zuordnungsmatrix['Rolle_' + rolle_id + '_Recht_' + recht_id];
          //Notify user
        });
    } else {
      this.rechtematrix.rechtVergeben(rolle_id, recht_id).subscribe(() => {
          //Happy case
          a = true;
          this.zuordnungsmatrix["Rolle_" + rolle_id + "_Recht_" + recht_id] = a;
          //Notify User
          });
      },
        () => {
          //Bad case
          event.source.checked = this.zuordnungsmatrix['Rolle_' + rolle_id + '_Recht_' + recht_id];
          //Notify user
        }
      );
    }
}