Question

我搜索了类似的链接，但没有运气。

我有一个对象数组，我需要显示为下拉列表，我必须选择一个默认选项。我的对象包含值，选定的属性。如果值和选定的属性匹配，那么它必须是默认选择的选项。我的下拉阵列看起来像这样......

[
    {
      "selected": "samsung",
      "resource_Attribute_ID": 486,
      "value": "hp",
      "type": "String"
    },
    {
      "selected": "samsung",
      "resource_Attribute_ID": 486,
      "value": "samsung",
      "type": "String"
    },
    {
      "selected": "samsung",
      "resource_Attribute_ID": 486,
      "value": "dell",
      "type": "String"
    }
  ]

和像这样的HTML代码..

<select formControlName="controlFordropdwn" >
            <option value="" disabled  hidden>Select</option>
            <option *ngFor="let type of dropdown"   [value]="type.value" [selected]='type.value == type.selected'  >
              {{type.value}}
            </option>
          </select>

任何与此相关的回复都会对我有所帮助。感谢你inAdvance

Answer 1

我没有测试过您的代码，但是这样的代码应该可以运行：

<select formControlName="controlFordropdwn">
    <option *ngIf="type.value == type.selected">{{type.value}}</option> <!--I added this line -->
    <option *ngFor="let type of dropdown" [value]="type.value" [selected]='type.value == type.selected'>
        {{type.value}}
    </option>
</select>

Answer 2

您需要创建一个变量来存储所选的值。然后，在初始化组件时，将默认值分配给该变量。在您的HTML中，您需要包含[(ngModel)]。

*。component.ts

public selectedValue: any; //not sure what the value type is

constructor() {
    this.selectedValue = "default value";
}

*。component.html

<select formControlName="controlFordropdwn" [(ngModel)]="selectedValue">
    <option value="" disabled  hidden>Select</option>
    <option *ngFor="let type of dropdown" [value]="type.value" [selected]='type.value == type.selected'>
        {{type.value}}
    </option>
</select>

Answer 3

我有这个我曾经工作的场景，希望它会有所帮助

 HTML:
 <select class="form-control">
 <option [attr.selected]="index == 2 ? true : null" *ngFor="let segment of segmentation; 
 let index=index;" [ngValue]="index">{{segment.name}}</option>
</select>

TS:
segmentation = [
{ "name": "name 1", "columns": [ { "index": 0}]},
{ "name": "name 2", "columns": [{"index": 1}]},
{ "name": "name 3","columns": [ { "index": 2}]}
]

Answer 4

使用被动表单时，selected属性被完全忽略，因此您需要做的是将值设置为表单控件，可以使用.find()找到并删除来自模板的selected。

constructor(private fb: FormBuilder) {
  this.myForm = this.fb.group({
    controlFordropdwn: ['']
  });
  let item = this.dropdown.find(x => x.value === x.selected);
  this.myForm.controls.controlFordropdwn.setValue(item.value)
 }

现在您的选择将正常工作。

<强> StackBlitz

如何在选择框中显示默认选择的选项

4 个答案: