Angular Material Mat-Select ngModel 布尔值无效

Question

我在 angular 7 项目和 angular material

中使用 mat-select 来 select 用户的性别

 <mat-form-field>
          <mat-select placeholder="Gender" required 
            formControlName="isMale" 
            [(ngModel)]="userProfile.isMale">
            <mat-option value="false">Women</mat-option>
            <mat-option value="true">Men</mat-option>
          </mat-select>
          <mat-hint align="end">Please Select...</mat-hint>
          <mat-error *ngIf="isControlHasError('isMale','required')"><strong>Please Select Gender</strong>
          </mat-error>
        </mat-form-field>

userProfile 从服务器获取并且 isMale 属性是布尔类型但获取数据后不显示 selected 值在 mat-select 我也用这种方式，但不起作用

        <mat-option [value]="'false'">Women</mat-option>
        <mat-option [value]="'true'">Men</mat-option>

但是没用

Answer 1

您似乎同时使用了 formControlName 和 [(ngModel)]。在 angular 7 中我们不能同时使用它们。这可能就是您的 ngModel 无法正常工作的原因。

您可以使用以下方法获取所选值：

formName.controls['isMale'].value;

您可以像这样为这个表单控件设置值：

formName.controls['isMale'].setValue(true);

其中 formName 是您的表单组名称。

Answer 2

最后我使用 this.postForm.controls['isMale'].setValue(profile.isMale?'true':'false'); 从服务器手动设置模型后使用 mat-select 并将布尔值转换为字符串

Answer 3

这对我有用（我正在使用 Angular 8）

   <mat-form-field>
    <mat-select [(ngModel)]="userProfile.isMale">
      <mat-option [value]="true">Men</mat-option>
      <mat-option [value]="false">Women</mat-option>
    </mat-select>
  </mat-form-field>

请注意，我使用的 [value] = "true or false" 没有任何单科。显然，userProfile.isMale 应该是布尔值（真或假）。

Answer 4

     <mat-option value="true"> Yes </mat-option>
     <mat-option value="false"> No </mat-option>

它会return你喜欢 IsApplicable="true" as string

     <mat-option [value]="true"> Yes </mat-option>
     <mat-option [value]="false"> No </mat-option>

this [value]="true" returns IsApplicable=true 作为字符串值

     <mat-option [ngValue]="true"> Yes </mat-option>
     <mat-option [ngValue]="false"> No </mat-option>

使用[ngValue]到return布尔值

Angular Material Mat-Select ngModel 布尔值无效

Angular Material Mat-Select ngModel boolean Value Not working

angular-material

ngmodel

angular