কৌণিক 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

এটি কাজ করে বলে মনে হচ্ছে না, আমার নির্বাচিত বিকল্পটির দিকে তাকালে এতে কোনও ধরণের নির্বাচিত ইঙ্গিত পাওয়া যায় না

— থিসনিক

আমি যখন এটি পরীক্ষা করেছিলাম তখন এটি ক্লিক করুন এই plnkr দেখুন । এটি লোডিং শেষ হলে, নির্বাচন করা ড্রপডাউনটি "দুটি" দেখায় যদিও স্বাভাবিক ডিফল্ট প্রথম উপাদান ("এক") হয়ে থাকে।

— ডগলাস

@ ডগলাস প্লানর কোডের সাথে পার্থক্যটি হ'ল এটি একটি [(ngModel)]বাঁধাই করে না সুতরাং এটি [selected]প্লেনক্রিতে বাঁধার কথা শোনে না এবং ওপির কোডেনে নয় (এই প্রভাবটি ব্যাখ্যা করে এমন একটি কাঁটাচামচ করা প্লানারের লিঙ্কের জন্য আমার উত্তর দেখুন)

— ম্যাথিজ

গতিশীল ফর্মগুলি ব্যবহার করুন: selected="workout.name == 'back'"প্রতিক্রিয়াশীল ফর্মগুলি ব্যবহার করুন:[selected]=workout.name == 'back'

— ফেদেভ

@ ফিদেব, আপনার কাছে দুর্দান্ত উত্তর রয়েছে এবং আমি ঠিক এটিই খুঁজছিলাম। আপনার প্রতিক্রিয়াশীল ফর্মগুলির উদাহরণটি অনুপস্থিত রয়েছে তা কেবল একবার দেখুন "। আমি আপনার কোডটি এর মতো অন্য পরিবর্তনকের সাথে ব্যবহার করেছি[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]বা আপনার কোডটি কোনওভাবে মানটিকে একটি স্ট্রিংয়ে রূপান্তরিত করে।

— গন্টার জ্যাচবাউয়ার

কি 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 পজিশনে বিকল্পটি ব্যবহার করার অনুমতি দেয়

— মবিউসইনভার্সন

@ ব্লুপার্লেল 'সিলেক্টড ওয়ার্কআউট' মডেলটিকে 'অপরিজ্ঞাত' হিসাবে শুরু করুন যদি আপনি এটিতে কিছু না সেট করেন। তবে ডিফল্ট আইটেমটির মূল্য হওয়া দরকার de

— রিচার্ড আগুয়েরে

এটি সেরা উত্তর

— রিচার্ড আগুয়েরে

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

এটির সাথে কিছুটা লড়াই করা হলেও নিম্নলিখিত সমাধানটি শেষ হয়েছে ... সম্ভবত এটি কারওর পক্ষে সহায়তা করবে।

এইচটিএমএল টেমপ্লেট:

<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 এ যা কাজ করে তা হল,

DOM ডিফল্ট সেট করতে: পাশাপাশি *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>

উপরের কোডে আপনি দেখতে পাচ্ছেন, পুনরাবৃত্তি বিকল্পটির নির্বাচিত বৈশিষ্ট্যটি পুনরাবৃত্তি তালিকার তালিকার সূচী পরীক্ষা করে সেট করা আছে। [অ্যাটর্নি। <এইচটিএমএল বৈশিষ্ট্য নাম>] কৌণিক 2 এ এইচটিএমএল বৈশিষ্ট্য নির্ধারণের জন্য ব্যবহৃত হয়।

আর একটি পন্থা টাইপ স্ক্রিপ্ট ফাইলে মডেল মান সেট করবে:

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

Answer 12

@ ম্যাথিজের উত্তরে যুক্ত করুন, দয়া করে নিশ্চিত করুন যে আপনার selectউপাদানটির একটি nameবৈশিষ্ট রয়েছে এবং এটি nameআপনার এইচটিএমএল টেমপ্লেটে অনন্য। কৌণিক 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

আপনি যদি [(এনজিএমডেল)] এর মাধ্যমে 2-মুখী বাঁধাই না চান তবে এটি করুন:

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

আমার প্রকল্পটি কেবল কৌনিক 4 এ পরীক্ষা করা হয়েছে এবং এটি কার্যকর! অ্যাকাউন্টসাল্ট হল অ্যাকাউন্ট অবজেক্টের একটি অ্যারে যেখানে নাম অ্যাকাউন্টের সম্পত্তি।

আকর্ষণীয় পর্যবেক্ষণ:
[ngValue] = "অ্যাক্ট" একই ফলাফল [ngValue] = "অ্যাক্ট.নাম" হিসাবে প্রয়োগ করে।
কৌনিক 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)
}

তারপরে কনস্ট্রাক্টর এবং এনজিওএনইনিটে

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

আমি আগে এই ইস্যুটির মুখোমুখি হয়েছিলাম এবং আমি এটিকে বিভিন্ন সহজ উপায়ের সাথে ঠিক করেছি

আপনার উপাদান 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

আপনাকে কেবল এনজিমোডেল এবং মানটি নির্বাচন করতে চান:

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