选择框默认值未显示 [(ngModel)] Angular 2答案

【问题标题】：Select Box default value is not showing with [(ngModel)] Angular 2选择框默认值未显示 [(ngModel)] Angular 2
【发布时间】：2019-01-20 20:35:18
【问题描述】：

我在我的代码中使用下面的 sn-p。如果我正在应用变量绑定“[(ngModel)]”，那么我的默认选项即“Title*”不可见。如果我删除它，那么它会正常运行并默认选中显示第一个选项的星号。

 <select name="title" id="title"title="Please select title" [(ngModel)]="title">
                <option value="title" selected>Title*</option>
                <option value="MD">MD</option>
                <option value="RN">RN</option>
                <option value="Mr">Mr</option>
                <option value="Ms">Ms</option>
  </select>

【问题讨论】：

有什么问题？
我的错！！！我正在使用 formbuilder，但忘记在 HTML 中添加。现在它工作正常。谢谢
@Chellappan - 我的默认选项没有被选中，当它在 DOM 中呈现时，它显示为空白而不是默认选择。希望我能澄清我的观点。

标签： angular typescript angular4-forms

【解决方案1】：

property/ngmodel title 需要在组件的类中设置为要从 titles 列表中预选的 title 元素。例如：

HTML

<h1>Selection</h1>
<select type="number" [(ngModel)]="title" >
  <option *ngFor="let titl of titles" [ngValue]="titl.name">{{titl.name}}</option>
</select>
{{title}}

组件

export class AppComponent  {
  title:string;
  titles:Array<Object> = [
      {name: "Title*"},
      {name: "MD"},
      {name: "RN"},
      {name: "Mr"},
      {name: "Ms"}
  ];
constructor() {
    //Old Code
   // this.title = this.titles[0]name;

  //New Code
  this.title = this.titles[0]['name'];
  }

}

Demo

【讨论】：

@AmbujKhanna 如果答案有帮助，请将其标记为正确！
您的代码有错误。 “.name”应该写成“['name']”

【解决方案2】：

试试这个。

在选择的情况下给出条件值

“Title”应该被选中

 <select name="title" id="title" #title="ngModel" title="Please select title" [(ngModel)]="title">
            <option [selected]="your condition" [value]="title">Title*</option>
            <option value="MD">MD</option>
            <option value="RN">RN</option>
            <option value="Mr">Mr</option>
            <option value="Ms">Ms</option>
 </select>


or try the below code

 <select name="title" id="title" #title="ngModel" title="Please select title" [(ngModel)]="title">
        <option [selected]="true" [ngValue]="title">Title*</option>
        <option value="MD">MD</option>
        <option value="RN">RN</option>
        <option value="Mr">Mr</option>
        <option value="Ms">Ms</option>
</select>

【讨论】：

它对我有用。我的项目中也发生了同样的情况。我为 Selected 添加了一些条件。现在它的工作。

【解决方案3】：

您甚至不需要使用selected 属性。

Angular 会为您做所有事情，您唯一需要了解的是，始终选择具有与原语具有相同值的选项，并在组件中绑定到该选项。因此名称数据绑定。

所以如果你有让我们说一个

<select [(ngModel)]="foo" ...

并且在 .ts 文件中，组件属性 foo 的值是 undefined，然后如果您添加选项

<option [ngValue]="undefined" ...

它默认被选中。如果您愿意，您还可以添加 disabled="disabled"，使其充当占位符。

【讨论】：

完美的解释。谢谢。感觉现在明白了这个概念。 :) 另外，我们可以直接写 disabled 而不是 disabled="disabled" ，也可以用作占位符

【解决方案4】：

对于最新的角度使用这个

//模板

 <form [formGroup]="testForm">
    <select formControlName="testControl">
       <option **[ngValue]="null" disabled**>Please choose an option</option>
       <option *ngFor="let option of options" [ngValue]="option.title">
       {{ option.title}}
       </option>
    </select>
</form>

//组件

options = [{ id: 1, title: 'title 1' }, { id: 2, title: 'title 2' }];
testForm = new FormGroup({
   testControl: new FormControl(null, Validators.required)
});

【讨论】：