Angular Reactive Forms - 下拉菜单未显示所选值答案

【问题标题】：Angular Reactive Forms - Dropdown not showing selected valueAngular Reactive Forms - 下拉菜单未显示所选值
【发布时间】：2020-05-08 16:20:04
【问题描述】：

我正在使用 Angular 9 构建一个响应式表单，我有一个下拉菜单，如下所示：

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">

    ...

    <div class="form-group">
        <label class="small mb-1" for="isSigningUpFor">I'm signing up for</label>
        <select class="form-control py-4" id="isSigningUpFor"
            formControlName="signingUpFor" (change)="changeSigningUpFor($event)">
            <option value="Please select..." disabled selected>-- Select --</option>
            <option *ngFor="let opt of signingUpForOptions" [value]="opt.value"
                [selected]="(opt.isSelected == true)">{{ opt.text }} ({{ opt.isSelected }})
            </option>
        </select>

这是组件中的相关代码：

registerForm = this.fb.group(
    {
        // other fields here
        signingUpFor: ['']
    },
);

signingUpForOptions = [
    {
        text: 'My Family',
        value: '1',
        isSelected: false
    },
    {
        text: 'My Sports Team',
        value: '2',
        isSelected: false
    },
    {
        text: 'The Lads',
        value: '3',
        isSelected: false
    }
];

changeSigningUpFor(e: any) {

    var thisValue = e.target.value;

    this.signingUpForOptions.forEach(x => {
        if (x.value == thisValue) {
            x.isSelected = true;
        } else {
            x.isSelected = false;
        }
    });

    this.registerForm.patchValue({
        signingUpFor: thisValue
    });
}

下拉菜单显示正常，并显示选项。当我选择一个时，changeSigningUpFor 会按预期运行，修补新值并适当地设置 isSelected 标志。我只是在 UI 中没有看到选定的选项，如下所示：

如果我删除 onChange 函数调用（即未显示所选值），结果是相同的。删除 opt.isSelected == true 也不能解决问题。

我在控制台中没有收到任何错误。我在这里感觉自己像个白痴，这应该是基本的，但我不习惯以这种方式处理表单，我做错了什么？

谢谢

【问题讨论】：

标签： angular forms

【解决方案1】：

这是一个工作示例。可能是您的 CSS，检查元素以查看颜色或可见性是否影响任何内容。还要检查您是否正确导入了 ReactiveForms，并且您是否在组件中正确加载了它。

https://stackblitz.com/edit/angular-ivy-9cl8gt?embed=1&file=src/app/app.component.ts

【讨论】：

谢谢迈克尔，原来这是我的 CSS，我是个白痴 :)
很高兴能帮上忙：D