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

Question

我在我的 html 中使用了一个切换开关。我可以从数据库中获取数据并在我的切换开关中正确呈现。在加载时，当我的值为 true 时，我的切换反映了 true，因此当我将其更改为 false 时，我的“ngModel”也更改为 false 并且可以更新我的数据库。但是，如果在加载时我的切换为假，当我将切换状态更改为真时，它不会反映在我的 ngModel 中。意思是，切换从假变为真，但“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>

在 .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 处于模态。你能帮忙吗？谢谢你。

标签： javascriptangular

Answer 1

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

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

请参阅此 stackblitz以获取演示。