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

反应式表单控件

您还可以使用rform.controls

在组件中设置值

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

Answer 4

尝试使用此

class BorderedView: NSView {
    override func draw(_ dirtyRect: NSRect) {
        super.draw(dirtyRect)

        // dash customization parameters
        let dashHeight: CGFloat = 3
        let dashLength: CGFloat = 10
        let dashColor: NSColor = .red

        // setup the context
        let currentContext = NSGraphicsContext.current()!.cgContext
        currentContext.setLineWidth(dashHeight)
        currentContext.setLineDash(phase: 0, lengths: [dashLength])
        currentContext.setStrokeColor(dashColor.cgColor)

        // draw the dashed path
        currentContext.addRect(bounds.insetBy(dx: dashHeight, dy: dashHeight))
        currentContext.strokePath()
    }
}

在控制器/组件使用中 -

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

Answer 5

另一个解决方案是自定义指令，它将监听<option>列表更改，如果没有选择，则选择第一个项目。

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 6

或者只是这样：）

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

享受！

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

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

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

Answer 9

您正在混合无法一起使用的两件事，因为它们会发生冲突：ngModel和selected。如果与params.searchType绑定，则必须将params.searchType初始化为所需的默认值： this.params.searchType = sTypes [0];

Answer 10

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

go get -v all

2）如果您使用的是Form控件，则只需将其设置为默认值即可

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

并使用普通的* ngFor

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

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>

Angular2选择默认的第一个选项

11 个答案: