Question

我在html中使用了切换开关。我可以从数据库中获取数据，并在切换开关中正确呈现它。加载时，当我的值为true时，我的切换显示为true，因此当我将其更改为false时，我的“ ngModel”也将更改为false并可以更新我的数据库。但是，如果加载时我的切换为false，则当我将切换状态更改为true时，它不会反映在ngModel中。意思是，切换从false更改为true，但“ ngModel”根本不反映更改。请在下面查看我的代码。

位于.html

<div class="togglebutton">
    <label>
        <input type="checkbox" 
        [checked]="selectedUser.IsActivated" (change)="$event.target.cheked ? (selectedUser.IsActivated = true) : (selectedUser.IsActivated = false)"> User Activated {{selectedUser.IsActivated}}
    </label>
</div>

at .ts

onEdit() {
    debugger;
    const user: User = {
      Id:         this.selectedUser.Id,         
      UserName:   this.selectedUser.UserName,    
      Password:   "",
      Email:      this.selectedUser.Email,       
      FirstName:  this.selectedUser.FirstName,   
      MiddleName: this.selectedUser.MiddleName, 
      LastName:   this.selectedUser.LastName,    
      IsActivated: this.selectedUser.IsActivated
    }
    this.us.registerUser(user)
      .subscribe((data:any)=>{
        if (data.Succeeded) {
          this.gs.showSwal('success-message');
          this.getUsers();
          this.selectedUser = null;
        }
      });
  }

div是模态的。你能帮忙吗？谢谢。

Answer 1

您可以使用selectedUser.IsActivated将[(ngModel)]属性绑定到复选框。如果HTML代码段位于form容器内，请确保输入字段具有唯一名称。在下面的代码中，仅当div不是selectedUser或null时才显示undefined。

<div class="togglebutton" *ngIf="!!selectedUser">
  <label>
    <input type="checkbox" name="activated" [(ngModel)]="selectedUser.IsActivated">
    User Activated {{selectedUser.IsActivated}}
  </label>
</div>

有关演示，请参见this stackblitz。

拨动开关在角度2中无法正常工作

1 个答案: