如何通过其changed-eventlistener设置复选框的checked-attribute

问题描述：

我在angular.js 4（with material.angular）中填充了复选框。当用户点击一个复选框时，HTTP-Request被发送到后端服务器。如果后端服务器不可用或服务调用出于任何原因而出现错误，我希望复选框返回到之前的状态（选中/未选中）。因此，我实现下列变化事件处理程序，使服务调用和反应依赖于服务调用的结果：如何通过其changed-eventlistener设置复选框的checked-attribute

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; 
     } 
    } 
    }

我将从zuordnungsmatrix的值绑定到类似于此的复选框'checked-attribute：

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

我的问题知道是，我不知道如何让复选框代表zuordnungsmatrix的实际状态。该变量被更新，这在视图结合工程，以及：

{{zuordnungsmatrix['Rolle_' + rolle.rolle_id + '_Recht_' + recht.recht_id] ? true : false}}

但我尝试了很多更新的复选框，但它没有工作。无论如何，复选框'checked-state'的初始设置工作正常。我如何更新自己的事件监听器中的复选框状态？

你看过https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D吗？ – Tschallacka

是的，我有，但你发布的文件是角度

答

的解决方案是非常简单的：

出于某种原因角不通过单向绑定更新复选框的变化值。您只需明确设置checked状态。为此，您可以通过参数$event将事件从HTML传递到组件。这已经在上面的例子中完成了。

在组件中的change事件处理程序中，您可以读取事件并获取对复选框元素的引用。所有你需要做的就是设置这个元素的检查属性（$event.source.checked）。从问题的事件处理现在看起来是这样的：

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调用失败。这是因为在快乐情况下，复选框会通过用户交互自动更新。

如何通过其changed-eventlistener设置复选框的checked-attribute

相关推荐