ドロップダウン検索でデフォルト値を設定しました

Question

角度2では、select2とsemantic-uiドロップダウンを使用してドロップダウン検索を使用しようとしました。デフォルト値を持たない場合は問題ありません。ページ編集データにデフォルト値を設定すると、データはデフォルト値を表示しません。私は "setTimeout（）"を使用する場合のみ値を表示します。とにかく私はsetTimeoutなしでデフォルト値を表示できますか？ contactPerson等しいが、それはしないだろうcontactperson.contactPersonIdながらI値に一致するように、[選択]を使用し、上記HTMLで

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> 

私はのsetTimeout（）を

コンポーネント使用しない表示される場合

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

Answer 1

[attr.value]を使用してドロップダウンの値を設定します。

例：[attr.value] = "contactperson.contactPersonId"

{{contactperson.contactPersonName}}

ヌル安全opeeratorで

{？{contactperson .contactPersonName}}

また、コンソールで例外が発生しているかどうかを確認してください。これは、テンプレートUIのレンダリング時に利用できなかったデータにアクセスしようとしている可能性があるためです。 上記のようにnullセーフ演算子 "？"を使用します。これはnull /未定義の値を延期し、値が利用可能な場合、テンプレートはデータを表示します。

あなたが言及したように、データはタイムアウト後にのみ表示されます。 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