कोणीय सामग्री: चटाई का चयन डिफ़ॉल्ट का चयन नहीं

Question

मेरे पास एक चटाई-चयन है जहां विकल्प एक सरणी में परिभाषित सभी ऑब्जेक्ट हैं। मैं एक विकल्प के लिए डिफ़ॉल्ट को मान सेट करने का प्रयास कर रहा हूं, हालांकि जब पृष्ठ रेंडर किया जाता है तो इसे चुना जा रहा है।

मेरी टाइपस्क्रिप्ट फ़ाइल में है:

  public options2 = [
    {"id": 1, "name": "a"},
    {"id": 2, "name": "b"}
  ]
  public selected2 = this.options2[1].id;

मेरी HTML फ़ाइल में है:

  <div>
    <mat-select
        [(value)]="selected2">
      <mat-option
          *ngFor="let option of options2"
          value="{{ option.id }}">
        {{ option.name }}
      </mat-option>
    </mat-select>
  </div>

मैंने दोनों ऑब्जेक्ट में सेटिंग selected2और valueइन mat-optionकरने की कोशिश की है और यह आईडी है, और दोनों में [(value)]और [(ngModel)]अंदर का उपयोग करने की कोशिश की है mat-select, लेकिन कोई भी काम नहीं कर रहा है।

मैं सामग्री संस्करण 2.0.0-beta.10 का उपयोग कर रहा हूं

Comments

का उपयोग करें compareWith। यह अधिक सुरुचिपूर्ण है।

— बैडिस मर्बेट

है चाहिए compareWith, Badis यहाँ का जवाब देखने के stackoverflow.com/questions/47333171/...

— bresleveloper

Answer 1

अपने टेम्पलेट में मूल्य के लिए एक बंधन का उपयोग करें।

value="{{ option.id }}"

होना चाहिए

[value]="option.id"

और अपने चयनित मूल्य में ngModelइसके बजाय का उपयोग करें value।

<mat-select [(value)]="selected2">

होना चाहिए

<mat-select [(ngModel)]="selected2">

पूरा कोड:

<div>
  <mat-select [(ngModel)]="selected2">
    <mat-option *ngFor="let option of options2" [value]="option.id">{{ option.name }}</mat-option>
  </mat-select>
</div>

---

संस्करण 2.0.0-beta.12 के रूप में एक साइड नोट पर , सामग्री का चयन अब एक mat-form-fieldतत्व को मूल तत्व के रूप में स्वीकार करता है इसलिए यह अन्य सामग्री इनपुट नियंत्रणों के अनुरूप है। अपग्रेड करने के बाद divएलीमेंट को mat-form-fieldएलिमेंट से बदलें ।

<mat-form-field>
  <mat-select [(ngModel)]="selected2">
    <mat-option *ngFor="let option of options2" [value]="option.id">{{ option.name }}</mat-option>
  </mat-select>
</mat-form-field>

Comments

"ऐसा लगता है कि आप प्रपत्र प्रपत्र पर ngModel का उपयोग कर रहे हैं जैसे कि प्रपत्रControlName। प्रतिक्रियाशील निर्देशों के साथ ngModel इनपुट संपत्ति और ngModelChange घटना का उपयोग करने के लिए समर्थन कोणीय 6 में हटा दिया गया है और इसे कोणीय v7 में हटा दिया जाएगा। इस बारे में अधिक जानकारी के लिए , यहाँ हमारे एपीआई डॉक्स देखें: angular.io/api/forms/FormControlName#use-with-ngmodel "

— ldgorman

@ldgorman - मैं यह नहीं देखता कि आप उस निष्कर्ष को कैसे आकर्षित कर रहे हैं। आप की बात कर रहे हैं, तो mat-form-field, यह है ..."used to wrap several Angular Material components and apply common Text field styles", इसलिए नहीं एक ही बात। अन्य कि तुलना में ओपी और यह भी मेरा उत्तर कोई जिक्र नहीं किया FormControl, FormGroupया FormControlName।

— इगोर

मुझे @Igor

— Chuck

@ चक - अगर आपको अभी भी समस्या हो रही है तो कृपया एक नया प्रश्न पूछें और एक न्यूनतम प्रतिलिपि प्रस्तुत करने योग्य उदाहरण शामिल करें । यदि आप चाहते हैं कि मैं एक नज़र डालूं तो आप इस प्रश्न का उत्तर उस प्रश्न के लिंक के साथ दे सकते हैं।

— इगोर

@ इगोर- हमने यह पता लगाया, मान एक संख्या के रूप में वापस आ रहा था और मैट-चयन यह एक स्ट्रिंग की तलाश में था। [compareWith]निर्देश है कि हमने क्या उपयोग किया है

— चक

Answer 2

उपयोग करें compareWith, चयनित मानों के साथ विकल्प मानों की तुलना करने के लिए एक फ़ंक्शन। यहाँ देखें: https://material.angular.io/compenders/select/api#MatSelect

निम्नलिखित संरचना की एक वस्तु के लिए:

listOfObjs = [{ name: 'john', id: '1'}, { name: 'jimmy', id: '2'},...]

मार्कअप को इस तरह परिभाषित करें:

<mat-form-field>
  <mat-select
    [compareWith]="compareObjects"
    [(ngModel)]="obj">
       <mat-option  *ngFor="let obj of listOfObjs" [value]="obj">
          {{ obj.name }}
       </mat-option>
    </mat-select>
</mat-form-field>

और तुलना फ़ंक्शन को इस तरह परिभाषित करें:

compareObjects(o1: any, o2: any): boolean {
  return o1.name === o2.name && o1.id === o2.id;
}

Comments

वस्तुओं से निपटते समय सही और सरल सरणियों से नहीं। धन्यवाद।

— रियान वैन ज़ील

Answer 3

मैं चटाई के चयन के साथ कोणीय 5 और प्रतिक्रियाशील रूपों का उपयोग कर रहा हूं और प्रारंभिक मूल्य प्रदर्शित करने के लिए उपरोक्त समाधानों में से कोई भी प्राप्त नहीं कर सका।

मुझे मैट-चयन घटक के भीतर उपयोग किए जा रहे विभिन्न प्रकारों से निपटने के लिए [तुलना] जोड़ना पड़ा। आंतरिक रूप से, यह प्रतीत होता है कि चयनित मूल्य को धारण करने के लिए एक चयन का उपयोग करता है। यदि समान मोड चालू है तो यह समान कोड को कई चयनों के साथ काम करने की अनुमति देता है।

कोणीय चयन नियंत्रण डॉक्टर

यहाँ मेरा समाधान है:

फॉर्म कंट्रोलर को इनिशियलाइज़ करने के लिए फॉर्म बिल्डर:

this.formGroup = this.fb.group({
    country: new FormControl([ this.myRecord.country.id ] ),
    ...
});

फिर अपने घटक पर तुलनात्मक कार्य को लागू करें:

compareIds(id1: any, id2: any): boolean {
    const a1 = determineId(id1);
    const a2 = determineId(id2);
    return a1 === a2;
}

अगली बार निश्चय फ़ंक्शन का निर्माण और निर्यात करें (मुझे एक स्टैंडअलोन फ़ंक्शन बनाना था ताकि मैट-चयन इसका उपयोग कर सके):

export function determineId(id: any): string {
    if (id.constructor.name === 'array' && id.length > 0) {
       return '' + id[0];
    }
    return '' + id;
}

अंत में अपने मैट-चयन में तुलनात्मक विशेषता जोड़ें:

<mat-form-field hintLabel="select one">
<mat-select placeholder="Country" formControlName="country" 
    [compareWith]="compareIds">

    <mat-option>None</mat-option>
    <mat-option *ngFor="let country of countries" [value]="country.id">
                        {{ country.name }}
    </mat-option>
</mat-select>
</mat-form-field>

Comments

आपका बहुत बहुत धन्यवाद! यह कारण खोजने के लिए बहुत अलग था।

— पैक्स बीच

@ हीथर 92065 यह एकमात्र समाधान है जिसने मेरे लिए काम किया। मैं आपका बहुत शुक्रगुजार हूँ!

— लैटिन योद्धा

Answer 4

आपको इसे नीचे के रूप [value]में बांधना चाहिए mat-option,

<mat-select placeholder="Panel color" [(value)]="selected2">
  <mat-option *ngFor="let option of options2" [value]="option.id">
    {{ option.name }}
  </mat-option>
</mat-select>

लाइव डेमो

Comments

यह पूरी तरह से काम करता है। NgModel या setValue () का उपयोग करने के लिए प्रेरित यह सबसे आसान और सही तरीका है

— रोहित पार्ट

Answer 5

आप बस अपनी तुलना फ़ंक्शन को लागू कर सकते हैं

[compareWith]="compareItems"

साथ ही देखें दस्तावेज । तो पूरा कोड इस तरह दिखेगा:

  <div>
    <mat-select
        [(value)]="selected2" [compareWith]="compareItems">
      <mat-option
          *ngFor="let option of options2"
          value="{{ option.id }}">
        {{ option.name }}
      </mat-option>
    </mat-select>
  </div>

और टाइपस्क्रिप्ट फ़ाइल में:

  compareItems(i1, i2) {
    return i1 && i2 && i1.id===i2.id;
  }

Comments

यह मेरे लिए काम किया है और मुझे लगता है कि यह ज्यादातर सही तरीका है लेकिन अगर सूची में केवल एक तत्व होता है तो यह काम नहीं कर रहा है। धन्यवाद

— कोड Kadiya

सिर्फ एक तत्व के साथ आपको किस तरह का अपवाद मिलता है? यदि कोई मौजूद हो i1या i2नहीं हो, तो Cuz की तुलना में प्रभार लेना चाहिए ।

— LeO

Answer 6

जैसा कि पहले से ही एंगुलर 6 में उल्लेख किया गया है कि प्रतिक्रियाशील रूपों में एनकोमॉडल का उपयोग किया जाता है (और कोणीय 7 में हटा दिया जाता है), इसलिए मैंने टेम्पलेट और घटक को निम्न रूप से संशोधित किया।

नमूना:

<mat-form-field>
    <mat-select [formControl]="filter" multiple 
                [compareWith]="compareFn">
        <mat-option *ngFor="let v of values" [value]="v">{{v.label}}</mat-option>
    </mat-select>
</mat-form-field>

घटक के मुख्य भाग ( onChangesऔर अन्य विवरण छोड़ दिए गए हैं):

interface SelectItem {
    label: string;
    value: any;
}

export class FilterComponent implements OnInit {
    filter = new FormControl();

    @Input
    selected: SelectItem[] = [];

    @Input()
    values: SelectItem[] = [];

    constructor() { }

    ngOnInit() {
        this.filter.setValue(this.selected);
    }

    compareFn(v1: SelectItem, v2: SelectItem): boolean {
        return compareFn(v1, v2);
    }
}

function compareFn(v1: SelectItem, v2: SelectItem): boolean {
    return v1 && v2 ? v1.value === v2.value : v1 === v2;
}

ऊपर में यह नोट करें। filter.setValue (यह। चयनित)ngOnInit

यह कोणीय 6 में काम करने लगता है।

Comments

यह वास्तव में सबसे अच्छा उत्तर होना चाहिए, क्योंकि यह तुलना करने के लिए दो अलग-अलग एपीआई परिणामों के साथ काम करते समय ऑब्जेक्ट चयनों को भी कवर कर रहा है।

— मार्को क्लेन

(उदा। किसी अन्य एपीआई कॉल के भीतर और चयनित आइटम से चयन करने के लिए मदों की कुल सूची)।

— मार्को क्लेन

कोणीय 7 अभी भी अस्थायी संचालित मॉडल के साथ काम करता है! लेकिन आप इसे उसी टेम्पल पर प्रतिक्रियाशील रूपों के साथ नहीं मिला सकते हैं। आपका इशारा [compareWith]महान था

— LeO

Answer 7

मैंने इन उदाहरणों में ऐसा ही किया। चटाई-विकल्पों में से एक के मूल्य को चुनने की कोशिश की। परंतु विफल हो गया।

मेरी गलती करना था [(मान)] = "someNumberVariable" एक संख्यात्मक प्रकार चर करने के लिए जबकि मैट-विकल्प में तार थे। भले ही वे टेम्पलेट में समान दिखते हों, यह उस विकल्प का चयन नहीं करेगा।

एक बार जब मैंने someNumberVariable को स्ट्रिंग में पार्स किया तो सब कुछ पूरी तरह से ठीक था।

तो ऐसा लगता है कि आपको मैट-सेलेक्ट और मैट-ऑप्शन मानों की न केवल एक ही संख्या (यदि आप संख्याओं को प्रस्तुत कर रहे हैं) होनी चाहिए, बल्कि उन्हें टाइप स्ट्रिंग की भी होने दें।

Comments

यह मेरा मुद्दा भी था। एक संख्यात्मक था, दूसरा एक स्ट्रिंग था।

— वादिम बर्मन

Answer 8

मेरे लिए समाधान था:

<mat-form-field>
  <mat-select #monedaSelect  formControlName="monedaDebito" [attr.disabled]="isLoading" [placeholder]="monedaLabel | async ">
  <mat-option *ngFor="let moneda of monedasList" [value]="moneda.id">{{moneda.detalle}}</mat-option>
</mat-select>

टीएस:

@ViewChild('monedaSelect') public monedaSelect: MatSelect;
this.genericService.getOpciones().subscribe(res => {

  this.monedasList = res;
  this.monedaSelect._onChange(res[0].id);


});

ऑब्जेक्ट का उपयोग करना: {आईडी: नंबर, डिटेल: स्ट्रिंग}

Answer 9

इसे इस्तेमाल करे!

this.selectedObjectList = [{id:1}, {id:2}, {id:3}]
this.allObjectList = [{id:1}, {id:2}, {id:3}, {id:4}, {id:5}]
let newList = this.allObjectList.filter(e => this.selectedObjectList.find(a => e.id == a.id))
this.selectedObjectList = newList

Answer 10

मेरा समाधान थोड़ा मुश्किल और सरल है।

<div>
    <mat-select
        [placeholder]="selected2">
      <mat-option
          *ngFor="let option of options2"
          value="{{ option.id }}">
        {{ option.name }}
      </mat-option>
    </mat-select>
  </div>

मैंने सिर्फ प्लेसहोल्डर का उपयोग किया है । सामग्री प्लेसहोल्डर का डिफ़ॉल्ट रंग है light gray। यह देखने के लिए कि विकल्प का चयन किया गया है, मैंने सिर्फ सीएसएस को निम्न प्रकार से हेरफेर किया है:

::ng-deep .mat-select-placeholder {
    color: black;
}

Answer 11

डिफ़ॉल्ट मान की बाइंडिंग या सेटिंग केवल तभी काम करती है, जब MatSelect पर मान विशेषता, MatOption के लिए बाध्य मान विशेषता के बराबर हो । यदि आपके पास बाध्य हैं करने के लिए अपने आइटम के मूल्य की विशेषता चटाई-विकल्प तत्व आप पर डिफ़ॉल्ट तत्व सेट करना होगा चटाई-चयन करने के लिए भी अपने मद की। यदि आपके पास बाध्य हैं करने के लिए अपने मद की चटाई-विकल्प , आप आबद्ध करना होगा करने के लिए चटाई-चयन भी नहीं एक पूरे आइटम, कैप्शन या किसी अन्य, केवल एक ही क्षेत्र,।captioncaptionIdid

लेकिन आपको इसे बाध्य करने की ज़रूरत है []

Answer 12

मैंने बहुत सावधानी से उपरोक्त का पालन किया और अभी भी चयनित प्रारंभिक मूल्य प्राप्त नहीं कर सका।

कारण यह था कि यद्यपि मेरे बंधे मूल्य को टाइपस्क्रिप्ट में एक स्ट्रिंग के रूप में परिभाषित किया गया था, मेरा बैकएंड एपीआई एक नंबर लौटा रहा था।

जावास्क्रिप्ट ढीली टाइपिंग ने केवल रनटाइम (त्रुटि के बिना) के प्रकार को बदल दिया, जिसने प्रारंभिक मूल्य के चयन को रोक दिया।

अंग

myBoundValue: string;

खाका

<mat-select [(ngModel)]="myBoundValue">

समाधान स्ट्रिंग को वापस करने के लिए एपीआई को अद्यतन करने के लिए था।

Answer 13

इसे प्राप्त करने का एक बहुत ही सरल तरीका formControlएक डिफ़ॉल्ट मान के साथ उपयोग कर रहा है , FormGroupउदाहरण के लिए (वैकल्पिक) के अंदर । यह क्षेत्र इनपुट के लिए एक इकाई चयनकर्ता का उपयोग करके एक उदाहरण है:

ts

H_AREA_UNIT = 1;
M_AREA_UNIT = 2;

exampleForm: FormGroup;

this.exampleForm = this.formBuilder.group({
  areaUnit: [this.H_AREA_UNIT],
});

एचटीएमएल

<form [formGroup]="exampleForm">
 <mat-form-field>
   <mat-label>Unit</mat-label>
   <mat-select formControlName="areaUnit">
     <mat-option [value]="H_AREA_UNIT">h</mat-option>
     <mat-option [value]="M_AREA_UNIT">m</mat-option>
   </mat-select>
 </mat-form-field>
</form>

Answer 14

एक संख्या और एक स्ट्रिंग उपयोग के बीच तुलना झूठी होने के लिए , इसलिए, आपने ngOnInit के भीतर एक स्ट्रिंग के लिए चयनित मूल्य डाला और यह काम करेगा।

मेरे पास एक ही मुद्दा था, मैंने एक एनम के साथ चटाई का चयन किया, का उपयोग करके

Object.keys(MyAwesomeEnum).filter(k => !isNaN(Number(k)));

और मेरे पास Enum value थी जिसका मैं चयन करना चाहता था ...

मैंने कुछ घंटे बिताए जिससे मेरा दिमाग यह जानने की कोशिश कर रहा था कि यह काम क्यों नहीं कर रहा है। और मैंने चटाई-चयन में उपयोग किए जा रहे सभी चर, कुंजी संग्रह और चयनित को प्रदान करने के बाद इसे किया ... यदि आपके पास ["0", "1", "2"] है और आप 1 का चयन करना चाहते हैं ( जो एक संख्या है) 1 == "1" गलत है और उसके कारण कुछ भी नहीं चुना गया है।

इसलिए, समाधान यह है कि आप ngOnInit के भीतर एक स्ट्रिंग के लिए चयनित मूल्य कास्ट करें और यह काम करेगा।

Comments

हाय जुआन आप इस पोस्ट को देखना चाह सकते हैं जो जेएस में विभिन्न समानता ऑपरेटरों के बारे में विवरण में जाता है: stackoverflow.com/questions/359494/…

— विलियम मूर

हाय विलियम, यह एक महान पद है, मैं वहां कुछ बार गया हूं ... और मैंने सीखा कि कैसे ठीक से तुलना करें (मुझे आशा है, और मैं हमेशा डॉक्टर की समीक्षा कर सकता हूं) ... यहां समस्या यह थी कि बाइंडिंग, द्वारा मजबूर सामग्री नियंत्रक, जहां विभिन्न प्रकारों, संख्याओं और तारों का उपयोग किया जाता है ... उस नियंत्रक को एक ही प्रकार की उम्मीद है, इसलिए, यदि चयनित एक संख्या है, तो संग्रह संख्याओं का संग्रह होना चाहिए ... यह मुद्दा था।

— जुआन

Answer 15

इसे मैने किया है।

<div>
    <mat-select [(ngModel)]="selected">
        <mat-option *ngFor="let option of options" 
            [value]="option.id === selected.id ? selected : option">
            {{ option.name }}
        </mat-option>
    </mat-select>
</div>

आम तौर पर आप कर सकते हैं [value]="option", जब तक कि आप कुछ डेटाबेस से अपने विकल्प नहीं लेते हैं ?? मुझे लगता है कि या तो डेटा प्राप्त करने में देरी के कारण यह काम नहीं करता है, या वस्तुओं को किसी तरह से अलग होने के बावजूद वे एक ही हैं ?? अजीब तरह से यह बाद में सबसे अधिक संभावना है, जैसा कि मैंने भी कोशिश की [value]="option === selected ? selected : option"और यह काम नहीं किया।

Answer 16

टीएस

   optionsFG: FormGroup;
   this.optionsFG = this.fb.group({
       optionValue: [null, Validators.required]
   });

   this.optionsFG.get('optionValue').setValue(option[0]); //option is the arrayName

एचटीएमएल

   <div class="text-right" [formGroup]="optionsFG">
     <mat-form-field>
         <mat-select placeholder="Category" formControlName="optionValue">
           <mat-option *ngFor="let option of options;let i =index" [value]="option">
            {{option.Value}}
          </mat-option>
        </mat-select>
      </mat-form-field>
  </div>

Answer 17

public options2 = [
  {"id": 1, "name": "a"},
  {"id": 2, "name": "b"}
]
 
YourFormGroup = FormGroup; 
mode: 'create' | 'update' = 'create';

constructor(@Inject(MAT_DIALOG_DATA) private defaults: defautValuesCpnt,
      private fb: FormBuilder,
      private cd: ChangeDetectorRef) {
}
  
ngOnInit() {

  if (this.defaults) {
    this.mode = 'update';
  } else {
    this.defaults = {} as Cpnt;
  }

  this.YourFormGroup.patchValue({
    ...
    fCtrlName: this.options2.find(x => x.name === this.defaults.name).id,
    ... 
  });

  this.YourFormGroup = this.fb.group({
    fCtrlName: [ , Validators.required]
  });

}

  <div>
    <mat-select formControlName="fCtrlName"> <mat-option
          *ngFor="let option of options2"
          value="{{ option.id }}">
        {{ option.name }}
      </mat-option>
    </mat-select>
  </div>

Comments

जब आप सुरक्षित घटक में संपादन और अद्यतन का उपयोग कर रहे हैं, तो यह मदद करेगा

— लंडनोस डिडास