Question

我正在使用角形材料7。我使用了mat-checkbox ..当选中“ Y”时，而未选中“ N”时。但是我的复选框始终显示y，并且在状态为“ N”时选中。

HTML

<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)" class="form-horizontal row-border">
<input matInput type="text" class="form-control form-input" name="userId"
[ngModel]="selectedRow?.userId" [readonly]="selectedRow?.userId" id="userId"
                                        required>
<input matInput type="text" class="form-control form-input" name="userName"
[ngModel]="selectedRow?.userName" id="userName" required>
<mat-checkbox type="text" name="blocked" [ngModel]="selectedRow?.blocked"
                                                id="blocked" (change)="(selectedRow?.blocked?'Y':'N')">{{selectedRow?.blocked}}</mat-checkbox>
<button type="submit" mat-flat-button color="primary">submit</button>
</form>

组件

onSubmit(form: NgForm ){
    // let value = this.selectedRow.blocked == true ? 'Y' : 'N';
    let data = form.value;
    console.log(data)
}

服务

export interface UserInfo {
    userId: string;
    userName: string;
    blocked: string;
  }

export class User implements UserInfo  {
    userId = '';
    userName = '';
    blocked = '';

    constructor(json) {
      if(!json){ return }
      this.userId = json.userId || this.userId;
      this.userName = json.userName || this.userName;
      this.blocked = json.blocked ? 'Y' : 'N';
    }
  }

Answer 1

由于在您的情况下，NgModel是单向绑定，因此selectedRow?.blocked的值在选中/取消选中时不会更改，因此应将html中的mat-checkbox更改为：< / p>

<mat-checkbox type="text" name="blocked" [ngModel]="selectedRow?.blocked"
     id="blocked" (change)="selectedRow.blocked = $event?'Y':'N'">
    {{selectedRow?.blocked}}
</mat-checkbox>

垫复选框始终显示为“ Y”

1 个答案: