Angular2のtypescriptですセット選択ドロップダウンボタンの値

Question

参考：ドロップダウンコンポーネントを使用しようとしてhttps://github.com/valor-software/ng2-bootstrap/tree/development/components/dropdown

私はボタンをクリックすると上の値のドロップダウンを引き、活字体を使用して選択に固執しかし が選択された値を設定することができなかったことができ

<option [selected]="value.id == value.statusId"> 

親テンプレート：

<dropdownst [values]="releaseNames" [selectedReleaseId]="item.releaseId"></dropdownst> 

ページのロードに、我々は次のように選択オプションを使用しないように210

オブジェクト：releaseName.ts

export class ReleaseName { 
releaseId: number; 
name: string; 
} 

ドロップダウンコンポーネント

：

@Component({ 
selector: 'dropdownst', 
template: `<div (click)="$event.preventDefault()"> 
      <div> 
       <button type="button" class="btn btn-warning btn-sm" (click)="dropdownMenu($event)"> 
         RELEASE (Toggle) 
       </button> 
      </div> 
      <div class="btn-group" dropdown [(isOpen)]="status.isopen"> 
       <button id="dropdown-list" class="btn btn-default" dropdownToggle > 
         {{title}} 
        <span class="caret"></span> 
       </button> 
       <ul class="dropdown-menu scrollable-menu" role="menu" aria-labelledby="dropdown-list"> 
        <li role="menuitem" *ngFor="let data of values"> 
         <a class="dropdown-item" [id]="data.releaseId" #val [title]="data.name" 
           (click)="updatePbiRelease(val.id, val.title)" > 
            {{data.name}} 
         </a> 
        </li> 
       </ul> 
      </div> 
     </div> `, 
directives: [ DropdownDirective, DropdownMenuDirective, DropdownToggleDirective, CORE_DIRECTIVES], 
styles:['.scrollable-menu {height: auto;max-height: 200px;overflow-x: hidden;}'] 
}) 
export class Angular2Dropdown implements OnInit{ 
@Input() 
selectedReleaseId: number; 
@Input() 
values: ReleaseName[]; 
@Input() 
title: string; 
private disabledMenu:boolean = false; 
appComponent: AppComponent; 
private status:{isopen:boolean} = {isopen: false}; 

constructor(@Inject(forwardRef(() => AppComponent)) private _parent:AppComponent){ 
    this.appComponent = _parent; 
    } 

updatePbiRelease(releaseValue, title){ 
    this.appComponent.updatePbiRelease(releaseValue); 
    this.title = title; 
    } 
private dropdownMenu($event:MouseEvent):void { 
    $event.preventDefault(); 
    $event.stopPropagation(); 
    this.status.isopen = !this.status.isopen; 
    } 
ngOnInit() {  
    }  
} 

HTMLテンプレートは：

<div (click)="$event.preventDefault()"> 
    <div> 
     <button type="button" class="btn btn-warning btn-sm" (click)="dropdownMenu($event)"> 
         RELEASE (Toggle) 
     </button> 
    </div> 
<div class="btn-group" dropdown [(isOpen)]="status.isopen"> 
     <button id="dropdown-list" class="btn btn-default" dropdownToggle > 

//Trying to set dropdown selected value here on page load as title from DB on TS Angular 2 
         {{title}} 

     <span class="caret"></span> 
     </button> 
    <ul class="dropdown-menu scrollable-menu" role="menu" aria-labelledby="dropdown-list"> 

//Iterate through releaseName has values passed from parent template 
//to get name (i.e title) matchng releaseId and Id from DB(i.e item.releaseId) 
     <li role="menuitem" *ngFor="let data of values"> 
     <a class="dropdown-item" [id]="data.releaseId" #val [title]="data.releaseId == selectedReleaseId ? data.name : data.name" 
      (click)="updatePbiRelease(val.id, val.title)" > 
       {{data.name}} 
     </a> 
     </li> 
    </ul> 
</div> 

すべてのヘルプは素晴らしいことです。親テンプレートのreleaseNameの条件

上のタイトルの値を設定し

<dropdown *ngIf="releaseNames" [values]="releaseNames" [selectedReleaseId]="item.releaseId"> 

場合

template: `<div (click)="$event.preventDefault()"> 
      <div> 
       <button type="button" class="btn btn-warning btn-sm" (click)="dropdownMenu($event)"> 
         RELEASE (Toggle) 
       </button> 
      </div> 
      <div class="btn-group" dropdown [(isOpen)]="status.isopen"> 
       <button id="dropdown-list" class="btn btn-default" dropdownToggle > 
         {{title}} 
        <span class="caret"></span> 
       </button> 
       <ul class="dropdown-menu scrollable-menu" role="menu" aria-labelledby="dropdown-list"> 
        <li role="menuitem" *ngFor="let data of values"> 
         <a class="dropdown-item" [id]="data.releaseId" #val [title]="data.name" 
           (click)="updatePbiRelease(val.id, val.title)" > 
            {{data.name}} 
         </a> 
        </li> 
       </ul> 
      </div> 
     </div> `, 

を追加しましたA：

Answer 1

は

テンプレートを動作するように）（テンプレートとngOnInitに以下の変更を行いましたページload onInit親テンプレートから渡されたIDを使用するselectedReleaseId

ngOnInit() { 
    for (var x = 0; x < this.values.length; x++) { 
     if(this.values[x].releaseId == this.selectedReleaseId) { 
      this.title = this.values[x].name; 
     } 
    }  
}