Angular2 [selected] không hoạt động để thiết lập giá trị mặc định?

Question

Tôi đang cố gắng để thiết lập giá trị mặc định cho lựa chọn của tôi vì vậy tôi cố gắng

[selected]= "selected_choice == 'one'" 

một cái gì đó như thế này

nhưng điều này đã không làm việc.

dân nói [chọn] không còn hoạt động vì vậy tôi cũng đã cố gắng [attr.selected] nhưng đã không làm việc cũng ..

đây là toàn bộ mã của tôi cho một chọn thẻ

<select (change)="passValue3()" formControlName="school" class="form-control" required [(ngModel)]="selected_student" class="selectionbox"> 
    <option *ngIf="selected_student == undefined">학년 선택</option> 
    <option *ngFor="let gradetype of gradeTypes" [ngValue]="gradetype" [attr.selected] = "gradetype.gradeType === 'Middle'">{{gradetype.gradeName}}</option> 
</select> 

Làm cách nào để thiết lập tùy chọn mặc định cho lựa chọn?

Answer 1

Nó không hoạt động vì lựa chọn của bạn được cho là có thuộc tính [(ngModel)].

Bạn chỉ cần đặt giá trị này thành giá trị bạn muốn được chọn và bạn sẽ tốt.

Answer 2

Bạn cần phải làm một cái gì đó như thế này:

Trong Markup:

<select placeholder="Sample select" [(ngModel)]="selectedItem"> 
        <option [value]="'all'">View All</option> 
        <option [value]="'item-1'">Item-1</option> 
        <option [value]="'item-2'">Item-2</option> 
       </select> 

Trong phần

selectedItem='all' 

Answer 3

Đây là giải pháp của tôi:

Ví dụ về múi giờ. Từ backend tôi có mục đối tượng tiếp theo:

activeItem = { "timezone": { "timeZoneHolder": "Europe", "region": "Europe/Paris (CEST)", "UTC": "UTC+1" }} 

Và cùng một mục từ mô hình của tôi trông một chút khác nhau như nguồn là thay đổi:

{ "timeZoneHolder": "France", "region": "Europe/Paris", "UTC": "UTC +01:00" } 

Như bạn thấy một chút khác biệt.

Vì vậy, đây là mô hình của tôi:

timeZones = [{ "timeZoneHolder": "France", "region": "Europe/Paris", "UTC": "UTC +01:00" }, { "timeZoneHolder": "French Polynesia", "region": "Pacific/Gambier", "UTC": "UTC -09:00" }] 

Và đây là mức tăng giá cho lựa chọn, hoạt động như một nét duyên dáng:

<select id="timezone" name="timezone" [(ngModel)]="activeItem.timezone"> 
<option [ngValue]="activeItem.timezone" [selected]="true" disabled hidden>{{activeItem.timezone.region}}</option> 
<option *ngFor="let timeZone of timeZones" 
     [ngValue]="{timeZoneHolder: timeZone.countryName, region: timeZone.timeZone, UTC: timeZone.UTC}"> 
    {{timeZone.timeZone}} 
</option> 

Enjoy :)

Answer 4

bạn so sánh các tùy chọn để chọn thuộc tính compareWith, Nếu bạn đang sử dụng góc 4, có thể nó sẽ không t làm việc trên góc 2.

HTML File:

<select [compareWith]="byAnimal" [(ngModel)]="selectedAnimal"> 
    <option *ngFor="let animal of animals" [ngValue]="animal"> 
    {{animal.type}} 
    </option> 
</select> 

TS tập

byAnimal(item1,item2){ 
    return item1.type == item2.type; 
} 

Một trong những soltion tốt nhất từ ​​này link