कोणीय 2 डिफ़ॉल्ट पहले विकल्प का चयन करें

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" (ngModelChange)="onChange($event)"> 
    <option *ngFor="let t of sTypes" [Value]="t.value">{{t.name}}</option> 
</select> 

नियंत्रक में

/घटक use-

this.params.searchType=sTypes[0] 

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

Answer 2

आप डिफ़ॉल्ट सूचकांक मूल्य का उपयोग करके पहले विकल्प का चयन कर सकते हैं का उपयोग करें।

<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

यह कोणीय 4.1.3 के लिए काम करता है:

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

Answer 4

आप मॉडल प्रेरित फार्म आप अपने घटक (ngOnInit())

में अपने <select> के चयनित डिफ़ॉल्ट मान सेट कर सकते हैं का उपयोग करते हैं 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 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

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

CDMs ऑब्जेक्ट की श्रृंखला है, जहां एक वस्तु विशेषता के रूप में पहचान और नाम है। और selectedCDM :)

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

का आनंद लें

Answer 7

या बस इस तरह CDMs सरणी के पहले तत्व के लिए सेट है!