Angular2 chọn tùy chọn đầu tiên mặc định

Question

Làm cách nào để chọn tùy chọn đầu tiên trong lựa chọn theo mặc định ở góc 2 mà mã sau dường như không hoạt động.

<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

hãy thử sử dụng này

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

trong điều khiển/phần use-

this.params.searchType=sTypes[0] 

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

Answer 2

Bạn có thể chọn tùy chọn đầu tiên theo mặc định sử dụng giá trị chỉ mục.

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

này làm việc cho 4.1.3 góc:

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

Answer 4

Nếu bạn sử dụng Model Driven Forms bạn có thể thiết lập giá trị mặc định được chọn của <select> của bạn trong thành phần của bạn (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> 

Forms Model-Driven: Trong khi sử dụng chỉ thị trong mẫu của chúng tôi cung cấp cho chúng tôi sức mạnh của mẫu nhanh mà không cần quá nhiều soạn sẵn, chúng ta đang hạn chế trong những gì chúng ta có thể làm. hình thức phản ứng, mặt khác, cho phép chúng tôi xác định hình thức của chúng tôi thông qua mã và cho chúng ta linh hoạt hơn nhiều và kiểm soát xác nhận dữ liệu. +

Có một chút kỳ diệu trong sự đơn giản của nó lúc đầu, nhưng sau bạn 'thoải mái với những điều cơ bản, học khối xây dựng của nó sẽ cho phép bạn xử lý các trường hợp sử dụng phức tạp hơn.

[example]

Answer 5

hơn Một giải pháp là chỉ thị tùy chỉnh, mà sẽ nghe <option> s thay đổi danh sách và chọn mục đầu tiên nếu không được chọn.

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

Và sau đó bạn có thể sử dụng nó với <select> yếu tố như thế này:

<select ... mySelectFirstOption> 

Answer 6

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

CDMS là một mảng của các đối tượng, nơi một đối tượng có Id và tên chính thức thuộc tính. Và selectedCDM được thiết lập để phần tử đầu tiên của mảng CDMS

Answer 7

Hoặc đơn giản là như thế này :)

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

Thưởng thức!