Vật liệu góc: chọn mat không chọn mặc định

Question

Tôi có tùy chọn mat nơi các tùy chọn là tất cả các đối tượng được xác định trong một mảng. Tôi đang cố gắng đặt giá trị thành mặc định cho một trong các tùy chọn, tuy nhiên nó đang được chọn trái khi trang hiển thị.

tập tin typescript My chứa:

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

tập tin HTML của tôi chứa:

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

Tôi đã cố gắng thiết lập selected2 và value trong mat-option cho cả hai đối tượng và đó là id, và đã cố gắng sử dụng cả hai số [(value)] và [(ngModel)] trong số mat-select, nhưng không có kết quả nào hoạt động.

Tôi đang sử dụng phiên bản tài liệu 2.0.0-beta.10

Cảm ơn

Answer 1

Sử dụng một ràng buộc cho các giá trị trong mẫu của bạn.

value="{{ option.id }}" 

nên

[value]="option.id" 

Và trong giá trị được lựa chọn của bạn sử dụng ngModel thay vì value.

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

nên

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

Toàn bộ mã:

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

---

Trên một mặt lưu ý như của version 2.0.0-beta.12 các material select bây giờ chấp nhận một yếu tố mat-form-field là yếu tố phụ huynh nên nó là phù hợp với các điều khiển đầu vào vật liệu khác. Thay thế các yếu tố div với mat-form-field yếu tố sau khi bạn nâng cấp.

<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

Bạn nên ràng buộc nó như [value] trong mat-option như dưới đây,

<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