使用 ngModel 时不显示所选值答案

【问题标题】：Selected value isn't displayed while using ngModel使用 ngModel 时不显示所选值
【发布时间】：2017-11-02 03:10:03
【问题描述】：

我有一个简单的组件，它没有设置 select 的值，而是用 HTML 编写值

<select name="select1" ngModel id="s1" class="form-control">
  <option value="Item 1">Item 1</option>
  <option value="Item 2">Item 2</option>
  <option value="Item 3" selected>Item 3</option>
  <option value="Item 4">Item 4</option>
  <option value="Custom Item 1">Custom Item 1</option>
</select>

所选选项的值为Item 3，但当我打开我的页面时，该值不会显示。如果没有ngModel，它会显示出来。当我按下重置按钮时也会显示它（只需输入type="reset"）。

复选框、单选按钮和简单的文本输入也有同样的问题，但在这种情况下，我使用 checked 显示单选按钮和复选框的默认值，并在文本输入的情况下设置 value="default value"。

这是ts 文件。

import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core';
import {NgForm} from '@angular/forms';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {

  @Input() show: boolean;
  @Output() hideFiltersEvent = new EventEmitter();

  constructor() { }

  ngOnInit() {
  }

  onSubmit(aForm: NgForm){
    console.log(aForm);
  }
  onHideFilters(){
    this.hideFiltersEvent.emit();
  }
}

这个文件里有一些方法，但它们与设置或重置表单控件无关。

如果可能的话，如何在不删除ngModel 的情况下显示表单控件的默认值，以及为什么会发生这一切？

【问题讨论】：

标签： forms angular

【解决方案1】：

在你的组件类中设置默认值

currentValue = "Item 3";

并使用模板中的 ngModel 将该值绑定到输入：

<select name="select1" [(ngModel)]="currentValue">

当模板打开时，起始当前值将显示为默认值。

【讨论】：

谢谢，它对select 有帮助，但是如何处理收音机和复选框？
请研究如何在 Angular 中使用单选按钮。有很多示例代码可用。
好的，我已经做了一些研究并找到了解决方案，这非常绝望

【解决方案2】：

对于单选按钮，我必须对 ngModel 和包含选中按钮的值的变量使用双向绑定。每个单选按钮都必须有这样的绑定。

<input type="radio" name="radio1" [(ngModel)]="opt1" class="form-check-input" value="Option 1"/> Option 1

这里的opt1 是一个字符串"Option 2" 并且该按钮未被选中，但是将选中一个类似的带有value 的Option 2 的单选按钮。

在复选框的情况下，我必须这样做，但变量应该有一个布尔值，true - 选中，false - 未选中。

【讨论】：