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

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

[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 को स्ट्रिंग में पार्स किया तो सब कुछ पूरी तरह से ठीक था।

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