Question

在angular 2中，我尝试使用select2和semantic-ui下拉列表来使用下拉搜索。它没有默认值时没关系。但是当我在页面编辑数据中设置默认值时，数据不会显示默认值。仅当我使用＆＃34; setTimeout（）＆＃34;时它才会显示值。无论如何，我可以在没有setTimeout的情况下显示默认值吗？

html（select2版本）

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

在上面的html中，我使用[selected]来匹配值，而contactPerson等于contactperson.contactPersonId它不会显示我是否不使用setTimeout（）

成分</ P>

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

Answer 1

使用[attr.value]设置下拉值。

ex：[attr.value] =“contactperson.contactPersonId”

使用null安全操作符

另外，看看你是否在控制台中遇到任何异常。可能就是这种情况，因为您可能尝试访问呈现模板UI时不可用的数据。像上面一样使用null安全操作符“？”。这将推迟null / undefined值，当值可用时，模板将显示数据。

正如您所提到的，数据仅在超时后显示。尝试null安全操作符。它应该工作，你不需要暂停。

Answer 2

<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

在下拉搜索

2 个答案: