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

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

이것으로 약간 어려움을 겪었지만 다음 해결책으로 끝났습니다 ... 어쩌면 누군가를 도울 것입니다.

HTML 템플릿 :

<select (change)="onValueChanged($event.target)">
    <option *ngFor="let option of uifOptions" [value]="option.value" [selected]="option == uifSelected ? true : false">{{option.text}}</option>
</select>

구성 요소:

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';    
export class UifDropdownComponent implements OnInit {
    @Input() uifOptions: {value: string, text: string}[];
    @Input() uifSelectedValue: string = '';
    @Output() uifSelectedValueChange:EventEmitter<string> = new EventEmitter<string>();
    uifSelected: {value: string, text: string} = {'value':'', 'text':''};

    constructor() { }

    onValueChanged(target: HTMLSelectElement):void {
        this.uifSelectedValue = target.value;
        this.uifSelectedValueChange.emit(this.uifSelectedValue);
    }

    ngOnInit() {
        this.uifSelected = this.uifOptions.filter(o => o.value == 
        this.uifSelectedValue)[0];
    }
}

다른 게시물을 완전히 구체화하면 Angular2 빠른 시작에서 작동하는 내용이 있습니다.

DOM 기본값을 설정하려면과 함께 의 속성에 *ngFor조건문을 사용하십시오 .<option>selected

Control의 기본값 을 설정하려면 생성자 인수를 사용하십시오. 그렇지 않으면 사용자가 선택한 옵션의 값 속성으로 컨트롤 값을 설정하는 옵션을 다시 선택할 때 onchange 전에 컨트롤 값은 null이됩니다.

스크립트:

import {ControlGroup,Control} from '@angular/common';
...
export class MyComponent{
  myForm: ControlGroup;
  myArray: Array<Object> = [obj1,obj2,obj3];
  myDefault: Object = myArray[1]; //or obj2

  ngOnInit(){ //override
    this.myForm = new ControlGroup({'myDropdown': new Control(this.myDefault)});
  }
  myOnSubmit(){
    console.log(this.myForm.value.myDropdown); //returns the control's value 
  }
}

마크 업 :

<form [ngFormModel]="myForm" (ngSubmit)="myOnSubmit()">
  <select ngControl="myDropdown">
    <option *ngFor="let eachObj of myArray" selected="eachObj==={{myDefault}}"
            value="{{eachObj}}">{{eachObj.myText}}</option>
  </select>
  <br>
  <button type="submit">Save</button>
</form>

[ngModel]대신 사용할 수 있으며 [(ngModel)]괜찮습니다.

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

위와 같이 할 수 있습니다.

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

보시다시피 위의 코드에서 반복 옵션의 선택된 속성은리스트의 반복 루프 인덱스 확인시 설정됩니다. [attr. <html 속성 이름>]은 angular2에서 html 속성을 설정하는 데 사용됩니다.

또 다른 접근 방식은 typescript 파일의 모델 값을 다음과 같이 설정하는 것입니다.

this.selectedWorkout = this.workouts.length > 0
                       ? this.workouts[0].name
                       : 'No data found';//'arm'

@Matthijs의 답변에 추가하여 select요소에 name속성이 있고 nameHTML 템플릿에서 고유 한지 확인하십시오 . Angular 2는 입력 이름을 사용하여 변경 사항을 업데이트합니다. 따라서 중복 된 이름이 있거나 입력 요소에 연결된 이름이 없으면 바인딩이 실패합니다.

선택한 바인딩 속성을 추가하지만 다른 필드에 대해서는 null로 설정해야합니다. 예 :

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

이제 작동합니다

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

양식을 사용하는 경우 name내부에 필드 가 있어야합니다.select 태그 .

태그에 추가 value하기 만하면 option됩니다.

selectedWorkout 값은 "back"이어야하며 완료되어야합니다.

[(ngModel)]을 통한 양방향 바인딩을 원하지 않는 경우 다음과 같이하십시오.

<select (change)="selectedAccountName = $event.target.value">
  <option *ngFor="let acct of accountsList" [ngValue]="acct">{{ acct.name }}</option>
</select>

Angular 4에서 내 프로젝트를 테스트했으며 작동합니다! accountsList는 이름이 Account의 속성 인 Account 개체의 배열입니다.

흥미로운 관찰 :
[ngValue] = "acct"는 [ngValue] = "acct.name"과 동일한 결과를 나타냅니다.
Angular 4가 어떻게 그것을 달성하는지 모릅니다!

단계 : 1 속성 선언 클래스 만들기

export class Task {
    title: string;
    priority: Array<any>;
    comment: string;

    constructor() {
        this.title      = '';
        this.priority   = [];
        this.comment    = '';
     }
}

스템 : 2 컴포넌트 클래스

import { Task } from './task';

export class TaskComponent implements OnInit {
  priorityList: Array<any> = [
    { value: 0, label: '✪' },
    { value: 1, label: '★' },
    { value: 2, label: '★★' },
    { value: 3, label: '★★★' },
    { value: 4, label: '★★★★' },
    { value: 5, label: '★★★★★' }
  ];
  taskModel: Task           = new Task();

  constructor(private taskService: TaskService) { }
  ngOnInit() {
    this.taskModel.priority     = [3]; // index number
  }
}

단계 : 3 파일 .html보기

<select class="form-control" name="priority" [(ngModel)]="taskModel.priority"  required>
    <option *ngFor="let list of priorityList" [value]="list.value">
      {{list.label}}
    </option>
</select>

산출:

나를 위해 몇 가지 속성을 정의합니다.

disabledFirstOption = true;

get isIEOrEdge(): boolean {
    return /msie\s|trident\/|edge\//i.test(window.navigator.userAgent)
}

그런 다음 생성자와 ngOnInit에서

constructor() {
    this.disabledFirstOption = false;
}

ngOnInit() {
    setTimeout(() => {
        this.disabledFirstOption = true;
    });
}

그리고 템플릿에서 이것을 선택 요소 내부의 첫 번째 옵션으로 추가합니다.

<option *ngIf="isIEOrEdge" [value]="undefined" [disabled]="disabledFirstOption" selected></option>

첫 번째 옵션을 선택하도록 허용하면 disabledFirstOption 속성의 사용을 제거 할 수 있습니다.

제 경우에는 여기 this.selectedtestSubmitResultView에 조건에 따라 기본값으로 설정되어 있으며 변수 testSubmitResultView는 testSubmitResultView. 이것은 실제로 나를 위해 일했습니다.

<select class="form-control" name="testSubmitResultView"  [(ngModel)]="selectedtestSubmitResultView" (ngModelChange)="updatetestSubmitResultView($event)">
    <option *ngFor="let testSubmitResultView of testSubmitResultViewArry" [ngValue]="testSubmitResultView" >
        {{testSubmitResultView.testSubmitResultViewName}}
    </option>
</select>

자세한 내용은,

testSubmitResultViewArry: Array<any> = [];
selectedtestSubmitResultView: string;
    
getTestSubmitResultViewList() {
    try {
        this.examService.getTestSubmitResultViewDetails().subscribe(response => {
            if (response != null && response !== undefined && response.length > 0) {
                response.forEach(x => {
                    if (x.isDeleted === false) {
                        this.testSubmitResultViewArry.push(x);
                    }
                    if (x.isDefault === true) {
                        this.selectedtestSubmitResultView = x;
                    }
                })
            }
        });
    } catch (ex) {
        console.log('Method: getTestSubmitResultViewList' + ex.message);
    }
}

이전에이 문제에 직면했고 다양한 간단한 해결 방법으로 해결했습니다.

Component.html의 경우

      <select class="form-control" ngValue="op1" (change)="gotit($event.target.value)">

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

     </select>

그런 다음 component.ts에서 선택한 옵션을 감지 할 수 있습니다.

gotit(name:string) {
//Use it from hare 
console.log(name);
}

아래와 같이 훌륭하게 작동합니다.

<select class="form-control" id="selectTipoDocumento" formControlName="tipoDocumento" [compareWith]="equals"
          [class.is-valid]="this.docForm.controls['tipoDocumento'].valid &&
           (this.docForm.controls['tipoDocumento'].touched ||  this.docForm.controls['tipoDocumento'].dirty)"
          [class.is-invalid]="!this.docForm.controls['tipoDocumento'].valid &&
           (this.docForm.controls['tipoDocumento'].touched ||  this.docForm.controls['tipoDocumento'].dirty)">
            <option value="">Selecione um tipo</option>
            <option *ngFor="let tipo of tiposDocumento" [ngValue]="tipo">{{tipo?.nome}}</option>
          </select>

ngModel과 원하는 값을 입력하면됩니다.

<select id="typeUser" ngModel="Advanced" name="typeUser">
  <option>Basic</option>
  <option>Advanced</option>
  <option>Pro</option>
</select>