html - एंगुलर में ऑब्जेक्ट को चुनने के लिए बाइंडिंग एलिमेंट




angular (8)

आप अपने <select> टैग में [(ngModel)] का उपयोग करने की आवश्यकता के बिना भी ऐसा कर सकते हैं

अपनी ts फ़ाइल में एक वैरिएबल घोषित करें

toStr = JSON.stringify;

और आप टेम्पलेट में ऐसा करते हैं

 <option *ngFor="let v of values;" [value]="toStr(v)">
      {{v}}
 </option>

और फिर उपयोग करें

let value=JSON.parse(event.target.value)

स्ट्रिंग को वैध जावास्क्रिप्ट ऑब्जेक्ट में वापस पार्स करने के लिए

मैं चुनिंदा तत्व को वस्तुओं की सूची में बांधना चाहता हूं - जो कि काफी आसान है:

@Component({
   selector: 'myApp',
   template: `<h1>My Application</h1>
              <select [(ngModel)]="selectedValue">
                 <option *ngFor="#c of countries" value="c.id">{{c.name}}</option>
              </select>`
})
export class AppComponent{
    countries = [
       {id: 1, name: "United States"},
       {id: 2, name: "Australia"}
       {id: 3, name: "Canada"},
       {id: 4, name: "Brazil"},
       {id: 5, name: "England"}
     ];
    selectedValue = null;
}

इस मामले में, ऐसा प्रतीत होता है कि selectedValue एक नंबर होगा - चयनित आइटम की आईडी।

हालाँकि, मैं वास्तव में देश ऑब्जेक्ट पर ही बांधना चाहूंगा ताकि selectedValue आईडी के बजाय सिलेक्टवैल्यू ऑब्जेक्ट हो। मैंने विकल्प के मूल्य को बदलने की कोशिश की जैसे:

<option *ngFor="#c of countries" value="c">{{c.name}}</option>

लेकिन यह काम नहीं करता है। यह मेरे चयनितवैल्यू में एक ऑब्जेक्ट को जगह देता है - लेकिन उस ऑब्जेक्ट को नहीं जो मैं उम्मीद कर रहा हूं। आप इसे मेरे प्लंकर उदाहरण में देख सकते हैं

मैंने भी परिवर्तन की घटना के लिए बाध्य करने की कोशिश की ताकि मैं चयनित आईडी के आधार पर वस्तु को स्वयं निर्धारित कर सकूं; हालाँकि, ऐसा प्रतीत होता है कि बाउंड एनकोडेल के अपडेट होने से पहले परिवर्तन की घटना समाप्त हो जाती है - मतलब उस बिंदु पर नए चयनित मूल्य तक मेरी पहुँच नहीं है।

क्या एंगुलर 2 के साथ किसी चयनित तत्व को बांधने का एक साफ तरीका है?


आप एक फ़ंक्शन का उपयोग करके आईडी का चयन कर सकते हैं

<option *ngFor="#c of countries" (change)="onchange(c.id)">{{c.name}}</option>

इस तरह से भी उपयोग करें ।।

 <h1>My Application</h1> <select [(ngModel)]="selectedValue"> <option *ngFor="let c of countries" value="{{c.id}}">{{c.name}}</option> </select> 

इसके अलावा, यदि दिए गए समाधानों के अलावा और कुछ भी काम नहीं करता है, तो जांचें कि क्या आपने "AppModule" के अंदर "FormModule" को आयात किया है, जो मेरे लिए एक कुंजी थी।


चयनित आइटम के लिए दूसरा गेट्टर बनाएं

<form [formGroup]="countryForm">
  <select formControlName="country">
    <option *ngFor="let c of countries" [value]="c.id">{{c.name}}</option>
  </select>

  <p>Selected Country: {{selectedCountry?.name}}</p>
</form>

Ts में:

get selectedCountry(){
  let countryId = this.countryForm.controls.country.value;
  let selected = this.countries.find(c=> c.id == countryId);
  return selected;
}

बस अगर कोई व्यक्ति प्रतिक्रियात्मक रूपों का उपयोग कर ऐसा करना चाहता है:

<form [formGroup]="form">
  <select formControlName="country">
    <option *ngFor="let country of countries" [ngValue]="country">{{country.name}}</option>
  </select>
  <p>Selected Country: {{country?.name}}</p>
</form>

here काम करने के उदाहरण की जाँच here


यह मदद कर सकता है:

<select [(ngModel)]="selectedValue">
      <option *ngFor="#c of countries" [value]="c.id">{{c.name}}</option>
</select>


app.component.html :

 <select type="number" [(ngModel)]="selectedLevel"> <option *ngFor="let level of levels" [ngValue]="level">{{level.name}}</option> </select> 

और app.component.ts :

 import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { levelNum:number; levels:Array<Object> = [ {num: 0, name: "AA"}, {num: 1, name: "BB"} ]; toNumber(){ this.levelNum = +this.levelNum; console.log(this.levelNum); } selectedLevel = this.levels[0]; selectedLevelCustomCompare = {num: 1, name: "BB"} compareFn(a, b) { console.log(a, b, a && b && a.num == b.num); return a && b && a.num == b.num; } } 




angular