选择框默认值不显示与[（ngModel）]角2

Question

我在代码中使用以下代码段。如果我正在应用变量绑定“ [（ngModel）]”，那么我的默认选项即“标题*”不可见。如果我将其删除，则它的行为正常，默认情况下，星标显示第一个选项。

 <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>

Answer 1

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

Angular 会为你做一切，你唯一需要理解的是，总是选择与原语具有相同值的选项，它在组件中绑定到该原语。因此名称为数据绑定。

所以如果你有让我们说

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

并且在.ts文件中，组件属性的foo值为undefined，那么如果添加选项

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

默认情况下会选择它。如果需要，您还可以添加它disabled="disabled"，使其充当占位符。

Answer 2

尝试这个。

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

应选择“标题”

 <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>

Answer 3

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

的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'];
  }

}

演示版