2016-10-17 4 views
0

2 각도에서 드롭 다운 검색을 사용하기 위해 select2 및 semantic-ui 드롭 다운을 사용하려고합니다. 기본값이 없으면 괜찮습니다. 그러나 페이지 편집 데이터에 기본값을 설정하면 데이터에 기본값이 표시되지 않습니다. "setTimeout()"을 사용하는 경우에만 값을 표시합니다. 어쨌든 setTimeout없이 기본값을 표시 할 수 있습니까?드롭 다운 검색에서 기본값 설정

HTML I가 [설정]를 사용 위에 HTML로 (선택 2 판)

<select class="form-control select2" id="input-contactperson" (change)="setContactPerson($event.target.value)"> 
    <option value="" disabled>please select</option> 
    <option *ngFor="let contactperson of objContactPerson" [selected]="contactperson.contactPersonId == contactPerson" value="{{contactperson.contactPersonId}}">{{contactperson.contactPersonName}}</option> 
</select> 

HTML (의미 버전)

<select class="form-control ui fluid search dropdown" id="input-contactperson" (change)="setContactPerson($event.target.value)"> 
    <option value="" data-value="">please select</option> 
    <option *ngFor="let contactperson of objContactPerson" [selected]="contactperson.contactPersonId == contactPerson" value="{{contactperson.contactPersonId}}">{{contactperson.contactPersonName}}</option> 
</select> 

는 contactPerson 동일 contactperson.contactPersonId하면서하지 않습니다 값과 일치하도록 나는에서는 setTimeout()을

구성 요소를 사용하지 않는 보여 경우

setTimeout(function() { 
    // $("#input-contactperson").select2("val", contactpersonid); //select 2 
    $(".ui.dropdown").dropdown("set selected", contactpersonid); // semantic 
}, 500); 

답변

1

드롭 다운 값을 설정하기 위해 [attr.value]를 사용하십시오.

예 : attr.value] = "contactperson.contactPersonId"

contactperson.contactPersonName {{}}

널 안전 opeerator 함께

{? {contactperson .contactPersonName}}

또한 콘솔에서 예외가 발생하는지 확인하십시오. 템플릿 UI를 렌더링 할 때 사용할 수 없었던 데이터에 액세스하려고 할 수 있기 때문에 그럴 수도 있습니다. 위와 같이 null 안전 연산자 "?"를 사용하십시오. 이렇게하면 null/undefined 값이 지연되고 값을 사용할 수있을 때 템플릿에 데이터가 표시됩니다.

언급 한대로 데이터가 시간 초과 후에 표시됩니다. null 안전 연산자를 사용하십시오. 그것은 작동해야합니다, 당신은 시간 제한을 두지 않아도됩니다.

+0

값 대신 [attr.value]를 사용하고 "?" 하지만 기본 값이 아닙니다. setTimeout을 추가하고 추가하지 않으면 다른 것을 볼 수 있습니다. setTimeout을 추가하는 동안 div 값 = "active"가 선택된 값으로 표시되고 기본값이 드롭 다운에 표시되지만 setTimeout이 아닌 경우 "active"클래스가 드롭 다운에 표시되지 않습니다. 어떤 종류의 렌더링 UI처럼 보입니다. 어쨌든 [attr.value]는 가치있는 것보다 낫습니다. 다른 제안이 있으면 알려주세요. –

0
<select class="select-state" #playerState (change)="0" [(ngModel)]="variable" 
     value="{{variable}}" 
     [disabled]="isPlayerInfoDisabled" [ngClass]="{'highlight':contactInfoError.has('INVALIDSTATE') && isHighlight == true}"> 
    <option *ngFor="let s of states; let i = index" [attr.value]="s">{{statesValue[i]}}</option> 
</select> 

나를 위해했던 것처럼이 예제를 참조하십시오. 다른 작업을하지 않는 한 확실히 작동합니다. 클래스에서이 변수를 변수로 정의하십시오. number = 0