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

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

मैं सामग्री संस्करण 2.0.0-beta.10

धन्यवाद

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> 

---

version 2.0.0-beta.12 material select के रूप में

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

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

Answer 2

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

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

LIVE DEMO