[html] 각도 2 드롭 다운 옵션 기본값

Html / 글쓴이

Angular 1에서는 다음을 사용하여 드롭 다운 상자의 기본 옵션을 선택할 수 있습니다.

<select
    data-ng-model="carSelection"
    data-ng-options = "x.make for x in cars" data-ng-selected="$first">
</select>

Angular 2에는 다음이 있습니다. 

<select class="form-control" [(ngModel)]="selectedWorkout" (ngModelChange)="updateWorkout($event)">
    <option *ngFor="#workout of workouts">{{workout.name}}</option>
</select>

내 옵션 데이터가 주어진 경우 기본 옵션을 어떻게 선택할 수 있습니까?

[{name: 'arm'}, {name: 'back'}, {name:'leg'}]기본적으로 설정하는 내 값은 back?

답변

다음 selected과 같이 속성에 바인딩을 추가합니다 .

<option *ngFor="#workout of workouts"
    [selected]="workout.name == 'back'">{{workout.name}}</option>

답변

기본값을 할당 selectedWorkout하고 사용하면 [ngValue](객체를 값으로 사용할 수 있으며 그렇지 않으면 문자열 만 지원됨) 원하는대로 수행해야합니다.

<select class="form-control" name="sel"
    [(ngModel)]="selectedWorkout"
    (ngModelChange)="updateWorkout($event)">
  <option *ngFor="let workout of workouts" [ngValue]="workout">
    {{workout.name}}
  </option>
</select>

할당하는 값 selectedWorkout이에서 사용 된 것과 동일한 인스턴스 인지 확인합니다 workouts. 동일한 속성과 값을 가진 다른 개체 인스턴스는 인식되지 않습니다. 개체 ID 만 확인됩니다.

최신 정보

Angular는에 대한 지원을 추가 compareWith하여 사용시 기본값을 더 쉽게 설정할 수 있습니다 [ngValue](객체 값용).

문서 https://angular.io/api/forms/SelectControlValueAccessor에서

<select [compareWith]="compareFn"  [(ngModel)]="selectedCountries">
    <option *ngFor="let country of countries" [ngValue]="country">
        {{country.name}}
    </option>
</select>
compareFn(c1: Country, c2: Country): boolean {
    return c1 && c2 ? c1.id === c2.id : c1 === c2;
}

이렇게하면 다른 (새) 개체 인스턴스를 기본값으로 설정할 수 있으며 compareFn동일한 것으로 간주되어야하는지 (예 : id속성이 동일한 지 여부)를 파악하는 데 사용됩니다 .

답변

모델의 값을 다음과 같이 원하는 기본값으로 설정하십시오.

selectedWorkout = 'back'

angular2 에서 원하는 동작을 얻는 다양한 방법을 보여주기 위해 @Douglas ‘plnkr의 포크를 만들었습니다 .

답변

선택 목록의 o 위치에이 코드를 추가하십시오.

<option [ngValue]="undefined" selected>Select</option>

답변

다음과 같이 접근 할 수 있습니다.

<option *ngFor="let workout of workouts" [value]="workout.name">{{workout.name}}</option>

또는 이렇게 :

  <option *ngFor="let workout of workouts" [attr.value]="workout.name" [attr.selected]="workout.name == 'leg' ? true : null">{{workout.name}}</option>

또는 다음과 같이 기본값을 설정할 수 있습니다.

<option [value]="null">Please Select</option>
<option *ngFor="let workout of workouts" [value]="workout.name">{{workout.name}}</option>

또는

<option [value]="0">Please Select</option>
<option *ngFor="let workout of workouts" [value]="workout.name">{{workout.name}}</option>

답변

색인을 사용하여 첫 번째 값을 기본값으로 표시

<option *ngFor="let workout of workouts; #i = index" [selected]="i == 0">{{workout.name}}</option>

답변

https://angular.io/api/forms/SelectControlValueAccessor 에 따르면 다음이 필요합니다.

theView.html : 

<select [compareWith]="compareFn"  [(ngModel)]="selectedCountries">
    <option *ngFor="let country of countries" [ngValue]="country">
        {{country.name}}
    </option>
</select>

theComponent.ts

import { SelectControlValueAccessor } from '@angular/forms';
    compareFn(c1: Country, c2: Country): boolean {
    return c1 && c2 ? c1.id === c2.id : c1 === c2;
}