Angular 角度2-如何设置<；选择>；默认选定选项

我的模板是这样的

<select>
  <option>AM</option>
  <option>PM</option>
</select>

是
颗粒物

---

如何设置默认选中的选项？

旧的纯HTML方式只适用于Angular2，如果您不想动态执行任何操作：

<select>
  <option selected>AM</option>
  <option>PM</option>
</select>

在组件类中

selectedValue = 'AM'; // You may assign 'AM or 'PM' dynamically here

control = new FormControl('AM');

以下链接可能有用：

上述Angular 2方法是模板驱动的forms方法。还有另一种方法，即下面描述的反应式表单方法：（您需要导入

反应式表单模块

）

以下链接可能有用：

是
颗粒物

导出类MyComponent{
defaultValue='PM'；
}

通常是这样做的

{{value}}
导出类MyComponent{
值=['AM'，'PM']；
defaultValue=this.values[1]；
}

提示对于非字符串值，请使用“[ngValue]=”

是
颗粒物

应该可以，试试这个

<select>
  <option [selected]='a=="None"'>None</option>
  <option [selected]='a=="AM"'>AM</option>
  <option [selected]='a=="PM"'>PM</option>
</select>

//in .ts file
a='PM'

没有一个
是
颗粒物
//在.ts文件中
a='PM'

如果您使用循环生成选项，即

*ngFor

，只需添加

[selected]

属性并绑定类中的值，则此方法更为有益

---

PS：这种方法在静态绑定和动态绑定方面都很有效。

我的NgModel被分配到一个数组，我无法为数组中的每个元素设置默认值。默认情况下，这些值未定义，因此您可以使用该值设置默认选项值

export class MyComponent {
  someList:Array<any> = ['apples','banana','oranges'];
  myModel: Array<any> = [];
}


<div *ngFor="let list of someList; let i = index;">
  <select  [(ngModel)]="myModel[i]" class="form-control">
    <option [value]="undefined">DEFAULT</option>
    <option [value]="'a'">A</option>
    <option [value]="'b'">B</option>
  </select>
 </div>

导出类MyComponent{
someList:Array=['apples'，'banana'，'oranges']；
myModel:Array=[]；
}
违约
A.
B

/**全部包括*/
@组成部分({
选择器：“应用程序选择”，
模板：`
选择一个选项。。。
{{item.text}
`
})
导出类SelectComponent扩展到OnInit{
私人选择表格：FormGroup；
选择_选项：任意[]=
[{id:1，文本：“文本1”，id:2，文本：“文本2”}]；
构造函数（私有生成器：FormBuilder）{
}
恩戈尼尼特（）{
this.init（）；
}
init（）{
this.select\u form=this.builder.group({
选择_control:newformcontrol（“1”[/**验证*/]））
});
}
设置活动（活动值：字符串）{
这个.select_form.get（'select_control'）.patchValue（active_value）；
}
}

对于模板驱动的表单，我这样做了，得到了默认选择

<select [(ngModel)]="defaultOption" name="identification">
                <option [value]=null>Select</option>
                <option *ngFor="let option of identification" [value]="option.id"> {{ option.name }} </option>
              </select>

---

加载时，我们可以将选择作为默认选择。

我不知道为什么这里有这么多长的答案

简短答复:

在选项标签中使用[selected]=“isSelected”

解决方案：

<select>
  <option [selected]="isSelected">AM</option>
  <option>PM</option>
</select>

是
颗粒物

资料来源：

编辑1： 使用数组的示例：

arr = [{str: 'A', isSelected: false},
{str: 'B', isSelected: true},
{str: 'C', isSelected: false},
{str: 'D', isSelected: false},
];

<select>
    <option *ngFor="let a of arr" value="a.str" [selected]="a.isSelected">{{a.str}}</option>
</select>

arr=[{str'A'，isSelected:false}，
{str'B'，isSelected:true}，
{str'C'，isSelected:false}，
{str'D'，isSelected:false}，
];
{{a.str}}

链接工作示例：

---选择选项---
{{somevalue}}
导出类MyComponent{
恩戈尼尼特（）{
somevalues=['abc'，'def'，'ghi']；
selectedValue=“selectOptions”；
}
someFunction（）{
//处理所选选项
var selection=selectedValue；
:
:
//将selectedValue重置为“--选择选项--”
selectedValue=“selectOptions”；
}
}

这样：

<select [(ngModel)]="Value">
  <option disabled selected value="">AM</option>
  <option >PM</option>
</select>

是
颗粒物

在模板文件中：

 <select name="AMPMTime" [(ngModel)]="aMPMTime.time" #aMPMTime="ngModel">
      <option [ngValue]="0">AM</option>
      <option [ngValue]="1">PM</option>
 </select>

选择控件将默认在“AM”选择。

全部的
{{oneItem.description}

只需将选项添加到列表中。这在Angular 4中对我有效。

选项=[
options = [
  {
    name : 'Option A',
    value : 1
  },
  {
    name : 'Option B',
    value : 2
  },
  {
    name : 'Option C',
    value : 3
  }
];
placeHolder = 'select option';

<div>
  <label>Label:</label>
  <select>

    <option [value]="null" ngValue="null" hidden>{{placeHolder}}</option>
    <option *ngFor="let option of options"
            [ngValue]="option.value">{{option.name]}}
    </option>
  </select>
</div>

{
名称：“选项A”，
价值：1
},
{
名称：“选项B”，
价值：2
},
{
名称：“选项C”，
价值：3
}
];
占位符='选择选项'；
标签：
{{占位符}}
{{option.name]}

选择选项
{{data.key}

我注意到没有人给出非ngModel解决方案，即：

html:

---

该解决方案对我有帮助。Component.html代码：

选择通知管理员
{{user.name}

组件。ts代码：

this.selectedUser=未定义；

以下是首选方法 html看起来像这样

<select>
  <option>AM</option>
  <option>PM</option>
</select>

---

你能像下面回答的一样设置吗？这个标记的答案是什么？它与angular2无关！这是正确的答案，为什么所有的否决票都是这样的。注意，这个值需要在组件的构造函数中设置。@user3248331答案是在第一次评论后几个月更新的。也许你可以使用反应式表单：a_form_group.get（'select_field'）.patchValue（“the_value_id”）或甚至在构建表单时：new FormControl（“the_value_id）”，/**Validation*/）。它在这两种方法中都有效，并提供更多动态行为，始终考虑可重用性、验证和数据处理。我在上面发布了一个答案。请为您的代码添加一个解释。StackOverflow上不欢迎只使用代码的ASNWER。这对我不起作用。还有什么需要做的，这里没有提到吗？似乎它正在起作用好的，请让我知道场景或任何细节。感谢它成功并节省了我的时间：）选择此选项在使用*NGO从数组迭代中获取选项时将不起作用。如果您的对象数组具有isSelected键，我认为它会起作用。我必须在早上跳到工作站时尝试。将更新她e、 [（ngModel）]在使用formControl时不起作用。（不推荐使用的警告）。可能需要补充的是，在使用formControl时，可以使用验证器设置defualt值？例如：

this.formbuilder.group（{formControlNameHere:['ValueOfOptionToBeSelectedByDefault'，[Validators.required]，]}）；

<select [(ngModel)]="selectedValue">
  <option value="selectOptions" disabled="disabled">---Select Options---</option>
  <option *ngFor="let somevalue of somevalues" [value]="somevalue">{{somevalue}}</option>
</select>

export class MyComponent {
  ngOnInit() {
   somevalues= ['abc', 'def','ghi'];
   selectedValue= "selectOptions";
  }
  someFunction() {
     // process selected option 
     var selection = selectedValue;
     :
     :
     //reset selectedValue to "--Select Options--"
     selectedValue = "selectOptions";
  }

}

<select [(ngModel)]="Value">
  <option disabled selected value="">AM</option>
  <option >PM</option>
</select>

 <select name="AMPMTime" [(ngModel)]="aMPMTime.time" #aMPMTime="ngModel">
      <option [ngValue]="0">AM</option>
      <option [ngValue]="1">PM</option>
 </select>

ngOnInit() {
    this.aMPMTime.time= 0;
}

        <select>
            <option [ngValue]="null">All</option>
            <option *ngFor="let oneItem of items" [ngValue]="oneItem.id">
               {{oneItem.description}}
            </option>
        </select>

options = [
  {
    name : 'Option A',
    value : 1
  },
  {
    name : 'Option B',
    value : 2
  },
  {
    name : 'Option C',
    value : 3
  }
];
placeHolder = 'select option';

<div>
  <label>Label:</label>
  <select>

    <option [value]="null" ngValue="null" hidden>{{placeHolder}}</option>
    <option *ngFor="let option of options"
            [ngValue]="option.value">{{option.name]}}
    </option>
  </select>
</div>

<select class="form-control" [(ngModel)]="someList.key" name="key" #key="ngModel" required>
     <option value="undefined" selected disabled>Select option</option>
     <option *ngFor="let data of someList" value="{{data.key}}">{{data.key}</option>
 </select>

    <select (change)="valueSelected($event.target.value)">
        <option *ngFor="let option of options">{{option}}</option>
    </select>

valueSelected(value:string) {
  console.log(value);
}

<select [(ngModel)]="defaultValue">
  <option *ngFor="let value of values" [ngValue]="value">{{value}}</option>
</select>

export class MyComponent {
  values = ['AM', 'PM'];
  defaultValue = this.values[0];
}