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

需要在组件的类中将

property / ngmodel title设置为要从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'];
  }

}

Demo

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

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

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

所以，如果你有一个

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

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

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

默认情况下被选中。如果需要，还可以添加disabled="disabled"，使其像占位符一样。

Answer 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)
});

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

4 个答案: