Angular2选择默认的第一个选项

Question

我如何在默认情况下在角度 2 中选择第一个选项，以下代码似乎不起作用。

<select id="sType" class="form-control" [(ngModel)]="params.searchType"> 
     <option *ngFor="let t of sTypes" [ngValue]="t.value" [attr.selected]="$index == 0 ? true : null">{{t.name}}</option> 
</select>

Answer 1

您可以使用索引值默认选择第一个选项。

<select id="sType" class="form-control" [(ngModel)]="params.searchType"> 
 <option   *ngFor="let t of sTypes; let i = index" [attr.value]="t.value" [attr.selected]="i == 0 ? true : null">{{t.name}}</option>
</select>

Answer 2

这适用于角度 4.1.3：

<option *ngFor="let t of sTypes; let i = index" [value]="t.value" [selected]="i==0">

Answer 3

另一个解决方案是自定义指令，它会监听<option>s 列表的变化，如果没有选择则选择第一项。

import { AfterViewInit, Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[mySelectFirstOption]'
})
export class SelectFirstOptionDirective implements AfterViewInit {
  private observer: MutationObserver;

  constructor(
      private elementRef: ElementRef,
      private renderer: Renderer2) {
    if ((elementRef.nativeElement.tagName || '').toLowerCase() !== 'select') {
      throw new Error('mySelectFirstOption directive can only be applied to <select> elements');
    }
  }

  ngAfterViewInit() {
    setTimeout(() => this.trySelectFirstOption(), 0);
    this.observer = new MutationObserver(mutations => this.trySelectFirstOption());
    const config: MutationObserverInit = { childList: true };
    this.observer.observe(this.elementRef.nativeElement, config);
  }

  private trySelectFirstOption() {
    const nativeElement = this.elementRef.nativeElement;
    if (nativeElement.options.length > 0 && nativeElement.selectedIndex === -1) {
      this.renderer.setProperty(nativeElement, 'value', nativeElement.options[0].value);
      nativeElement.dispatchEvent(new Event('change'));
    }
  }
}

然后你可以将它与<select> 元素一起使用，如下所示：

<select ... mySelectFirstOption>

Answer 4

或者只是这样:)

<option *ngFor="let value of values; let i = index"
    [ngValue]="value" [attr.selected]="!i">
    {{item}}
</option>

享受吧！

Answer 5

试试这个

<select id="sType" class="form-control" [(ngModel)]="params.searchType" (ngModelChange)="onChange($event)"> 
     <option *ngFor="let t of sTypes" [Value]="t.value">{{t.name}}</option> 
</select>

在控制器/组件中使用-

this.params.searchType=sTypes[0]

onChange(updatedValue) {
this.params.searchType = updatedValue;
//other code
}

Answer 6

反应式表单控件

您还可以使用 rform.controls 在组件中设置值

this.rForm.controls['id'].setValue(this.array[0].id);

Answer 7

如果您使用模型驱动表单，您可以在组件中设置<select> 的选定默认值 (ngOnInit())

componenet.file.ts

public fieldSelect : any;

ngOnInit(){
    ...
    this.fieldSelect= { key: "mySelect", label: "Example Select"};
    this.controlsConfig= [];
    this.controlsConfig[this.fieldSelect.key] =  [""];
    this.myFormGroup= this.formBuilder.group(this.controlsConfig);
...
}

component.file.html

<div class="col-md-2" [formGroup]="myFormGroup">
    <select (change)="onChangeTypeImp($event)" [formControlName]="fieldSelect.key">
       <option *ngFor="let item of items;" [value]="item">{{item}}</option>
   </select>                      
</div>

模型驱动表单：在我们的模板中使用指令给了我们 没有太多样板的快速原型设计的力量，我们是 限制在我们能做的事情上。另一方面，反应形式，让 我们通过代码定义我们的表单，给我们更多的灵活性和 控制数据验证。+

起初它的简单有一点魔力，但之后 您对基础知识感到满意，学习它的构建块将 允许您处理更复杂的用例。

[example]

Answer 8

您正在混合两个不能一起工作的东西，因为它们相互冲突：ngModel 和 selected。如果您与 params.searchType 绑定，则必须将 params.searchType 初始化为您想要的默认值： this.params.searchType = sTypes[0];

Answer 9

 <select class="form-control" [(ngModel)]="selectedCDM" >
    <option *ngFor="let cdm of CDMs;let i = index"  [ngValue]='cdm'>
                {{cdm.Name}}
    </option>
 </select>

CDMs 是一个对象数组，其中一个对象具有 Id 和 Name 作为属性。并且 selectedCDM 设置为 CDMs 数组的第一个元素

Answer 10

1) 我希望这种方法也能有所帮助！

<select id="category" name="category" class="form-control" formControlName="category">
     <option [attr.selected]="true" [ngValue]="categories[0].id" >{{categories[0].name}}</option>
     <option *ngFor="let cat of categories.slice(1)" [ngValue]="cat.id">{{cat.name}}</option>
 </select>

2 ) 如果您使用的是表单控件，您只需将其设置为默认值

 this.fgAddingProduct = new FormGroup({
        category: new FormControl(this.categories[0].id, [Validators.required]),
 });

并使用普通的 *ngFor

<select id="category" name="category" class="form-control" formControlName="category">
            <option *ngFor="let cat of categories" [ngValue]="cat.id">{{cat.name}}</option>
        </select>

Answer 11

试试这个简单的例子来选择第一个选项。要选择其他选项，请更改 i==0、i==1 或 i==2 等数字。

<select>
    <option *ngFor="let item of items; let i = index" [value]="item.name" [selected]="i == 0">
        {{item.name}}
    </option>
</select>

Answer 12

这是来自 exercism.org 上的机器人模拟器代码 kata。这更像是一个 TypeScript 解决方案。视图代码如下：

<select #robotSelect id='robotSelect' name='robotSelect' [(ngModel)]='robotId' size='5' style='width: 200px;'>
  <optgroup>
    <option *ngFor='let bot of factoryRobots'>{{ bot.id }}</option>
  </optgroup>
</select>

在 TypeScript 中，获取 AfterViewInit 生命周期钩子中的 # 并将第零个选项设置为选中：

import { Component, ElementRef, AfterViewInit } from '@angular/core';
...
  robotId: string = '';
  robotSelect: HTMLSelectElement | undefined = undefined;
  //
  constructor( private _elementRef: ElementRef ) {
    ...
  }
  //
  ngAfterViewInit() {
    this.robotSelect = this._elementRef.nativeElement.querySelector('#robotSelect');
    if( this.robotSelect !== undefined ) {
      if( this.robotSelect.options.length > 0 ) {
        this.robotSelect.options[0].selected = true;
      }
    }
  }