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




typescript angular-material2 (7)

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

value="{{ option.id }}"

होना चाहिए

[value]="option.id"

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

<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>

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

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

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

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


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

[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;
  }

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

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

जैसा कि पहले से ही एंगुलर 6 में उल्लेख किया गया है कि प्रतिक्रियाशील रूपों में एनकोमॉडल का उपयोग किया जाता है।

नमूना:

<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;
}

ऊपर में ngOnInit में इस .filter.setValue (इस . ngOnInit ) को नोट करें।

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


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

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

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

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

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

<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);


});

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


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

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

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

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





angular-material2