角材料选择奇怪的问题答案

【问题标题】：Angular material selected weird issue角材料选择奇怪的问题
【发布时间】：2020-05-08 03:43:32
【问题描述】：

我在使用 .要填写我有一个这样的 JSON：

values: [{'id' : 'male', 'label' : 'Homme'}, {'id': 'female', 'label' : 'Femme'}]

我的 HTML 看起来像这样：

<div class="col-md-2" *ngIf="type === 'select'">
    <mat-form-field>
        <select matNativeControl>
             <option *ngFor="let options of values"
                     [value]="options.id"
                     [selected]="options.id == selectedValue">
                {{options.label}}
             </option>
         </select>
        <mat-hint align="end">{{ label }}</mat-hint>
    </mat-form-field>
</div>

如果 selectedValue 等于 female 则没有问题。但如果它等于male，则没有选择的选项，我找不到原因

有什么帮助吗？

谢谢

【问题讨论】：

标签： angular angular-material

【解决方案1】：

我不确定发生了什么，但我认为如果您尝试在选择上设置默认值，这将很有帮助Set default option in mat-select。

像链接显示的两种方式绑定或使用带有值预设的反应式表单可能是您最好的选择。

祝你好运！

【讨论】：

【解决方案2】：

首先，你应该在这里使用 mat-select。因为，如果您使用 mat-form-field，则有必要在那里调用 mat-select 或任何其他 mat-field。然后您应该在 [(value)] 内的 mat-select 值上使用您的 selectedValue，如下所示。

<div class="col-md-2" *ngIf="type === 'select'">
    <mat-form-field>
       <mat-select matInput formControlName="yourId" [(value)]="selectedValue"
                    placeholder="Your text">
          <ng-container *ngFor="let options of values">
            <mat-option value="{{options.id}}">{{options.label}}</mat-option>
          </ng-container>
        </mat-select>

    </mat-form-field>

</div>

【讨论】：