2016-10-17 5 views
0

В угловом 2 я пытаюсь использовать выпадающее меню select2 и semantic-u, чтобы использовать раскрывающийся поиск. Это нормально, когда оно не имеет значения по умолчанию. но когда я устанавливаю значение по умолчанию в данных редактирования страницы, данные не будут отображаться по умолчанию. Он будет показывать значение, только если я использую «setTimeout()». В любом случае, я могу показать значение по умолчанию без setTimeout?установить значение по умолчанию в раскрывающемся списке поиска

HTML (Select2 версия)

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> 

В HTML выше я использую [выбран], чтобы соответствовать значение в то время как 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}}

Кроме того, посмотрите, есть ли какие-либо исключения в консоли. Это может быть так, потому что вы можете попытаться получить доступ к данным, которые не были доступны во время предоставления пользовательского интерфейса шаблона. Как и выше, используйте нулевой безопасный оператор «?». Это отложит значение null/undefined, и когда значение будет доступно, шаблон покажет данные.

Как вы упомянули, данные появляются только после таймаута. Попробуйте нулевой безопасный оператор. Он должен работать, вам не нужно устанавливать тайм-аут.

+0

Я пытаюсь использовать [attr.value] вместо значения, а также «?» но это не показывает значение по умолчанию. Я могу видеть разные, когда добавляю setTimeout и не добавляю. в то время как я добавляю setTimeout, я вижу div-класс = "active" в выбранном значении, и значение по умолчанию будет отображаться в раскрывающемся списке, но когда я не устанавливаюTimeout, класс "active" не отображается в раскрывающемся списке. похожий на какой-то интерфейс визуализации. в любом случае [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

Смежные вопросы