कोणीय 2 ड्रॉपडाउन विकल्प डिफ़ॉल्ट मान

Question

कोणीय 1 में मैं निम्नलिखित का उपयोग करके ड्रॉप डाउन बॉक्स के लिए डिफ़ॉल्ट विकल्प चुन सकता हूं:

<select 
    data-ng-model="carSelection"
    data-ng-options = "x.make for x in cars" data-ng-selected="$first">
</select>

कोणीय 2 में मेरे पास है:

<select class="form-control" [(ngModel)]="selectedWorkout" (ngModelChange)="updateWorkout($event)">
    <option *ngFor="#workout of workouts">{{workout.name}}</option>
</select>

मैं अपना विकल्प डेटा दिया गया डिफ़ॉल्ट विकल्प कैसे चुन सकता हूं:

[{name: 'arm'}, {name: 'back'}, {name:'leg'}]और मेरा मूल्य मुझे डिफ़ॉल्ट पर है back?

Answer 1

selectedसंपत्ति के लिए एक बंधन जोड़ें , इस तरह:

<option *ngFor="#workout of workouts" 
    [selected]="workout.name == 'back'">{{workout.name}}</option>

Comments

यह काम करने के लिए प्रकट नहीं होता है, मेरे चयनित विकल्प को देखते हुए इसमें किसी प्रकार का चयनित संकेत नहीं है

— ClickThisNick

@ClickThisNick जब मैंने इसका परीक्षण किया तो यह काम कर गया। इस तख्ती को देखें । जब यह लोडिंग खत्म करता है, तो चयन ड्रॉपडाउन "दो" दिखाता है, भले ही सामान्य डिफ़ॉल्ट पहला तत्व ("एक") होगा।

— डगलस

@ डगलस plnr में कोड के साथ अंतर यह है कि इसमें [(ngModel)]बाइंडिंग नहीं है इसलिए यह [selected]plnkr में बाइंडिंग को सुनता है, न कि ओपी के कोडन में (इस आशय की व्याख्या करने वाले fork plnr के लिंक के लिए मेरा उत्तर देखें)

— Matthijs

डायनेमिक फॉर्म्स का उपयोग: selected="workout.name == 'back'"रिएक्टिव फॉर्म्स का इस्तेमाल:[selected]=workout.name == 'back'

— fidev

@fidev, आपके पास एक शानदार उत्तर है, और यह वही था जो मैं खोज रहा था। बस एक नज़र है कि आपके प्रतिक्रियाशील रूपों का उदाहरण याद आ रहा है "। मैंने आपके कोड का उपयोग इस तरह के एक अन्य चर के साथ किया[selected]="workout.name == exercise.name"

— अल्फा ब्रावो

Answer 2

यदि आप डिफ़ॉल्ट मान असाइन करते हैं selectedWorkoutऔर उपयोग करते हैं [ngValue](जो ऑब्जेक्ट को मान के रूप में उपयोग करने की अनुमति देता है - अन्यथा केवल स्ट्रिंग समर्थित है) तो यह आपको केवल वही करना चाहिए जो आप चाहते हैं:

<select class="form-control" name="sel" 
    [(ngModel)]="selectedWorkout" 
    (ngModelChange)="updateWorkout($event)">
  <option *ngFor="let workout of workouts" [ngValue]="workout">
    {{workout.name}}
  </option>
</select>

सुनिश्चित करें कि आपके द्वारा असाइन किया गया मान selectedWorkoutउसी का उपयोग करने वाले की तुलना में एक ही उदाहरण है workouts। समान गुणों और मूल्यों के साथ एक और वस्तु उदाहरण को भी मान्यता नहीं दी जाएगी। केवल ऑब्जेक्ट पहचान की जाँच की जाती है।

अपडेट करें

के लिए कोणीय जोड़ा समर्थन compareWith, जो उपयोग किए जाने पर डिफ़ॉल्ट मान सेट करना आसान बनाता [ngValue]है (ऑब्जेक्ट मानों के लिए)

डॉक्स से https://angular.io/api/forms/SelectControlValueAccessor

<select [compareWith]="compareFn"  [(ngModel)]="selectedCountries">
    <option *ngFor="let country of countries" [ngValue]="country">
        {{country.name}}
    </option>
</select>

compareFn(c1: Country, c2: Country): boolean {
    return c1 && c2 ? c1.id === c2.id : c1 === c2;
}

इस तरह एक अलग (नया) ऑब्जेक्ट उदाहरण डिफ़ॉल्ट मान के रूप में सेट किया जा सकता है और compareFnयह पता लगाने के लिए उपयोग किया जाता है कि क्या उन्हें समान माना जाना चाहिए (उदाहरण के लिए यदि idसंपत्ति समान है।

Comments

यदि आपके पास समय है, तो क्या आप इसके लिए एक प्लंकर बना सकते हैं? किसी कारण से जब मैं यह कोशिश करता हूं कि $ घटना एक घटना के रूप में आ रही है न कि वस्तु के रूप में। यदि मैं ईवेंट को घटना में बदल देता हूं। शब्द-सूची में, मान '[ऑब्जेक्ट]' जैसे स्ट्रिंग के रूप में आता है

— crh225

मुझे लगता है कि यह अधिक उपयोगी होगा यदि आप एक प्लंकर बनाने की कोशिश करते हैं जो आपके मुद्दे को पुन: पेश करने की अनुमति देता है ;-) शायद आप या आपके कोड के [value]बजाय [ngValue]किसी भी तरह का उपयोग कर रहे हैं मूल्य एक स्ट्रिंग में परिवर्तित होने का कारण बनता है।

— गुंटर जोचबॉयर 16

क्या करते हैं c1और क्या c2संकेत देते हैं compareFn? और यह भी, फ़ंक्शन बॉडी में मूल्यांकन कैसे काम करता है?

— डोंगबिन किम

मान selectedCountriesऔरcountry

— गुंटर ज़ोचबॉउर

मुझे इस उत्तर के पहले भाग के लिए धन्यवाद मिला।

— तीव्र निंजा

Answer 3

बस इस तरह आप चाहते हैं डिफ़ॉल्ट के लिए मॉडल का मूल्य निर्धारित करें:

selectedWorkout = 'back'

मैंने कोणीय 2 में वांछित व्यवहार प्राप्त करने के लिए विभिन्न तरीकों का प्रदर्शन करने के लिए यहाँ @ डगलस के प्लैंक का कांटा बनाया ।

Comments

इसके लिए मेरे (कोणीय 4 में) काम करने के लिए मुझे भी [ngValue] = "वैल" सेट करना पड़ा। मेरा आइटम्स स्रोत वस्तुओं का एक सरणी नहीं था, लेकिन सिर्फ तार की एक सरणी। <select [(ngModel)]="selectedTimeFrame"> <option *ngFor="let val of timeFrames" [ngValue]="val">val</option> </select>

— एस। रॉबीजंस

Answer 4

इस कोड को चयन सूची के ओ स्थिति में जोड़ें।

<option [ngValue]="undefined" selected>Select</option>

Comments

अपरिभाषित [ngValue] को स्थापित करने का उद्देश्य क्या है?

— ब्लूपार्क

यह स्वीकृत उत्तर होना चाहिए। [एनवीवैल्यू] को सही ढंग से अपरिभाषित करने के लिए सेट करना, पहले 'रेंडरर्स' का चयन करते समय डिफ़ॉल्ट मान का चयन करना।

— अधिकतम

यह सही जवाब है। आपको स्थिति 0

— mobiusinversion

यदि आप इसे कुछ भी नहीं सेट करते हैं, तो @bluePearl मॉडल 'SelectWorkout' को 'अपरिभाषित' के रूप में शुरू करते हैं। तब डिफ़ॉल्ट आइटम का डी वैल्यू होना आवश्यक है।

— रिचर्ड एगुइरे

यह सबसे अच्छा जवाब है

— रिचर्ड एगुइरे

Answer 5

आप इस तरह से संपर्क कर सकते हैं:

<option *ngFor="let workout of workouts" [value]="workout.name">{{workout.name}}</option>

या इस तरह:

  <option *ngFor="let workout of workouts" [attr.value]="workout.name" [attr.selected]="workout.name == 'leg' ? true : null">{{workout.name}}</option>

या आप इस तरह से डिफ़ॉल्ट मान सेट कर सकते हैं:

<option [value]="null">Please Select</option>
<option *ngFor="let workout of workouts" [value]="workout.name">{{workout.name}}</option>

या

<option [value]="0">Please Select</option>
<option *ngFor="let workout of workouts" [value]="workout.name">{{workout.name}}</option>

Answer 6

पहले मान को डिफ़ॉल्ट दिखाने के लिए अनुक्रमणिका का उपयोग करें

<option *ngFor="let workout of workouts; #i = index" [selected]="i == 0">{{workout.name}}</option>

Answer 7

Https://angular.io/api/forms/SelectControlValueAccessor के अनुसार आपको बस निम्नलिखित की आवश्यकता है:

theView.html:

<select [compareWith]="compareFn"  [(ngModel)]="selectedCountries">
    <option *ngFor="let country of countries" [ngValue]="country">
        {{country.name}}
    </option>
</select>

theComponent.ts

import { SelectControlValueAccessor } from '@angular/forms';
    compareFn(c1: Country, c2: Country): boolean {
    return c1 && c2 ? c1.id === c2.id : c1 === c2;
}

Answer 8

इस एक के साथ थोड़ा संघर्ष किया, लेकिन निम्नलिखित समाधान के साथ समाप्त हो गया ... शायद यह किसी की मदद करेगा।

HTML टेम्पलेट:

<select (change)="onValueChanged($event.target)">
    <option *ngFor="let option of uifOptions" [value]="option.value" [selected]="option == uifSelected ? true : false">{{option.text}}</option>
</select>

घटक:

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';    
export class UifDropdownComponent implements OnInit {
    @Input() uifOptions: {value: string, text: string}[];
    @Input() uifSelectedValue: string = '';
    @Output() uifSelectedValueChange:EventEmitter<string> = new EventEmitter<string>();
    uifSelected: {value: string, text: string} = {'value':'', 'text':''};

    constructor() { }

    onValueChanged(target: HTMLSelectElement):void {
        this.uifSelectedValue = target.value;
        this.uifSelectedValueChange.emit(this.uifSelectedValue);
    }

    ngOnInit() {
        this.uifSelected = this.uifOptions.filter(o => o.value == 
        this.uifSelectedValue)[0];
    }
}

Answer 9

पूरी तरह से अन्य पदों के लिए, यहाँ क्या Angular2 Quickstart में काम करता है,

डोम डिफ़ॉल्ट सेट करने के लिए: के साथ *ngFor, में एक सशर्त बयान का उपयोग <option>की selectedविशेषता।

Controlडिफ़ॉल्ट को सेट करने के लिए : इसके निर्माता तर्क का उपयोग करें। अन्यथा एक ऑनकॉन्ग से पहले जब उपयोगकर्ता एक विकल्प को फिर से चुनता है, जो नियंत्रण के मूल्य को चयनित विकल्प के मूल्य विशेषता के साथ सेट करता है, तो नियंत्रण मूल्य शून्य हो जाएगा।

स्क्रिप्ट:

import {ControlGroup,Control} from '@angular/common';
...
export class MyComponent{
  myForm: ControlGroup;
  myArray: Array<Object> = [obj1,obj2,obj3];
  myDefault: Object = myArray[1]; //or obj2

  ngOnInit(){ //override
    this.myForm = new ControlGroup({'myDropdown': new Control(this.myDefault)});
  }
  myOnSubmit(){
    console.log(this.myForm.value.myDropdown); //returns the control's value 
  }
}

मार्कअप:

<form [ngFormModel]="myForm" (ngSubmit)="myOnSubmit()">
  <select ngControl="myDropdown">
    <option *ngFor="let eachObj of myArray" selected="eachObj==={{myDefault}}"
            value="{{eachObj}}">{{eachObj.myText}}</option>
  </select>
  <br>
  <button type="submit">Save</button>
</form>

Answer 10

आप इसका उपयोग कर सकते [ngModel]हैं [(ngModel)]और यह ठीक है

<select class="form-control" **[ngModel]="selectedWorkout"** (ngModelChange)="updateWorkout($event)">
   <option *ngFor="#workout of workouts">{{workout.name}}</option>
</select>

Answer 11

आप ऊपर के रूप में कर सकते हैं:

<select class="form-control" 
        [(ngModel)]="selectedWorkout" 
        (ngModelChange)="updateWorkout($event)">
    <option *ngFor="#workout of workouts;
                    let itemIndex = index"
            [attr.selected]="itemIndex == 0">
    {{workout.name}}
    </option>
</select>

उपरोक्त कोड में, जैसा कि आप देख सकते हैं, दोहराए जाने वाले विकल्प की चयनित विशेषता सूची के दोहराए जाने वाले लूप के सूचकांक की जांच करने पर सेट है। [attr। <html विशेषता नाम>] कोणीय विशेषता में html विशेषता स्थापित करने के लिए उपयोग किया जाता है।

एक अन्य दृष्टिकोण टाइपस्क्रिप्ट फ़ाइल में मॉडल मान सेट कर रहा है:

this.selectedWorkout = this.workouts.length > 0
                       ? this.workouts[0].name
                       : 'No data found';//'arm'

Answer 12

@Matthijs के उत्तर पर जोड़ें, कृपया सुनिश्चित करें कि आपके selectतत्व में एक nameविशेषता है और यह nameआपके html टेम्पलेट में अद्वितीय है। परिवर्तन को अद्यतन करने के लिए कोणीय 2 इनपुट नाम का उपयोग कर रहा है। इस प्रकार, यदि डुप्लिकेट किए गए नाम हैं या इनपुट तत्व से जुड़ा कोई नाम नहीं है, तो बंधन विफल हो जाएगा।

Answer 13

चयनित बाइंडिंग प्रॉपर्टी जोड़ें, लेकिन यह सुनिश्चित करें कि इसे अन्य क्षेत्रों के लिए, जैसे:

<option *ngFor="#workout of workouts" [selected]="workout.name =='back' ? true: null">{{workout.name}}</option>

अब यह काम करेगा

Answer 14

<select class="form-control" name='someting' [ngModel]="selectedWorkout" (ngModelChange)="updateWorkout($event)">
    <option value="{{workout.name}}" *ngFor="#workout of workouts">{{workout.name}}</option>
</select>

यदि आप फ़ॉर्म का उपयोग कर रहे हैं तो टैग के nameअंदर फ़ील्ड होना चाहिए select।

आपको केवल टैग valueकरने की आवश्यकता है option।

selectedWorkout मान "पीछे" होना चाहिए, और उसका किया हुआ होना चाहिए।

Answer 15

यदि आप [(ngModel)] के माध्यम से 2-तरह से बाध्यकारी नहीं चाहते हैं, तो यह करें:

<select (change)="selectedAccountName = $event.target.value">
  <option *ngFor="let acct of accountsList" [ngValue]="acct">{{ acct.name }}</option>
</select>

बस कोणीय 4 पर मेरी परियोजना पर परीक्षण किया गया और यह काम करता है! खाता सूची खाता वस्तुओं की एक सरणी है जिसमें नाम खाता की संपत्ति है।

दिलचस्प अवलोकन:
[ngValue] = "acct" उसी परिणाम का परिणाम देता है जैसे [ngValue] = "acct .name"।
पता नहीं कैसे कोणीय 4 यह पूरा!

Answer 16

स्टेप: 1 प्रॉपर्टीज डिक्लेयर क्लास बनाएं

export class Task {
    title: string;
    priority: Array<any>;
    comment: string;

    constructor() {
        this.title      = '';
        this.priority   = [];
        this.comment    = '';
     }
}

स्टेम: 2 आपका घटक वर्ग

import { Task } from './task';

export class TaskComponent implements OnInit {
  priorityList: Array<any> = [
    { value: 0, label: '✪' },
    { value: 1, label: '★' },
    { value: 2, label: '★★' },
    { value: 3, label: '★★★' },
    { value: 4, label: '★★★★' },
    { value: 5, label: '★★★★★' }
  ];
  taskModel: Task           = new Task();

  constructor(private taskService: TaskService) { }
  ngOnInit() {
    this.taskModel.priority     = [3]; // index number
  }
}

चरण: 3 फ़ाइल देखें। Html

<select class="form-control" name="priority" [(ngModel)]="taskModel.priority"  required>
    <option *ngFor="let list of priorityList" [value]="list.value">
      {{list.label}}
    </option>
</select>

आउटपुट:

Answer 17

मेरे लिए, मैं कुछ गुणों को परिभाषित करता हूं:

disabledFirstOption = true;

get isIEOrEdge(): boolean {
    return /msie\s|trident\/|edge\//i.test(window.navigator.userAgent)
}

फिर कंस्ट्रक्टर और ngOnInit में

constructor() {
    this.disabledFirstOption = false;
}

ngOnInit() {
    setTimeout(() => {
        this.disabledFirstOption = true;
    });
}

और टेम्पलेट में मैं इसे चुनिंदा तत्व के अंदर पहले विकल्प के रूप में जोड़ता हूं

<option *ngIf="isIEOrEdge" [value]="undefined" [disabled]="disabledFirstOption" selected></option>

यदि आप पहले विकल्प का चयन करने की अनुमति देते हैं तो आप संपत्ति के उपयोग को हटा सकते हैं

Answer 18

मेरे मामले में, यहां this.selectedtestSubmitResultViewशर्तों के आधार पर डिफ़ॉल्ट मान निर्धारित किया गया है और एक चर testSubmitResultViewएक और एक ही होना चाहिए testSubmitResultView। यह वास्तव में मेरे लिए काम किया

<select class="form-control" name="testSubmitResultView"  [(ngModel)]="selectedtestSubmitResultView" (ngModelChange)="updatetestSubmitResultView($event)">
    <option *ngFor="let testSubmitResultView of testSubmitResultViewArry" [ngValue]="testSubmitResultView" >
        {{testSubmitResultView.testSubmitResultViewName}}
    </option>
</select>

अधिक जानकारी के लिए,

testSubmitResultViewArry: Array<any> = [];
selectedtestSubmitResultView: string;
    
getTestSubmitResultViewList() {
    try {
        this.examService.getTestSubmitResultViewDetails().subscribe(response => {
            if (response != null && response !== undefined && response.length > 0) {
                response.forEach(x => {
                    if (x.isDeleted === false) {
                        this.testSubmitResultViewArry.push(x);
                    }
                    if (x.isDefault === true) {
                        this.selectedtestSubmitResultView = x;
                    }
                })
            }
        });
    } catch (ex) {
        console.log('Method: getTestSubmitResultViewList' + ex.message);
    }
}

Answer 19

मुझे पहले इस समस्या का सामना करना पड़ा और मैंने इसे अलग-अलग सरल तरीके से निर्धारित किया

आपके Component.html के लिए

      <select class="form-control" ngValue="op1" (change)="gotit($event.target.value)">

      <option *ngFor="let workout of workouts" value="{{workout.name}}" name="op1" >{{workout.name}}</option>

     </select>

फिर अपने कंपोनेंट में। आप द्वारा चयनित विकल्प का पता लगा सकते हैं

gotit(name:string) {
//Use it from hare 
console.log(name);
}

Answer 20

नीचे दिए गए अनुसार महान काम करता है:

<select class="form-control" id="selectTipoDocumento" formControlName="tipoDocumento" [compareWith]="equals"
          [class.is-valid]="this.docForm.controls['tipoDocumento'].valid &&
           (this.docForm.controls['tipoDocumento'].touched ||  this.docForm.controls['tipoDocumento'].dirty)"
          [class.is-invalid]="!this.docForm.controls['tipoDocumento'].valid &&
           (this.docForm.controls['tipoDocumento'].touched ||  this.docForm.controls['tipoDocumento'].dirty)">
            <option value="">Selecione um tipo</option>
            <option *ngFor="let tipo of tiposDocumento" [ngValue]="tipo">{{tipo?.nome}}</option>
          </select>

Answer 21

आपको बस ngModel और आपके द्वारा चयनित मूल्य चाहिए:

<select id="typeUser" ngModel="Advanced" name="typeUser">
  <option>Basic</option>
  <option>Advanced</option>
  <option>Pro</option>
</select>