Twitter bootstrap 3 Angular2字体脚本在页面加载时设置所选下拉按钮值

参考：尝试使用下拉组件

我可以在单击按钮时拉出下拉值，并使用Typescript保留选择，但无法在页面加载时设置所选值，就像我们使用选择选项所做的那样，如：

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

下拉组件：

@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() {     
    }    
}

@组件({
选择器：“dropdownst”，
模板：`
释放（切换）
{{title}}


{{data.name}


`,
指令：[DropdownDirective、DropdownMenuDirective、DropdownToggleDirective、CORE_指令]，
样式：['.可滚动菜单{高度：自动；最大高度：200px；溢出-x:隐藏；}']
})
导出类Angular2Dropdown实现OnInit{
@输入（）
selectedReleaseId：数字；
@输入（）
值：ReleaseName[]；
@输入（）
标题：字符串；
private disabledMenu:boolean=false；
appComponent:appComponent；
私有状态：{isopen:boolean}={isopen:false}；
构造函数（@Inject（forwardRef（（）=>AppComponent））private\u父级：AppComponent）{
this.appComponent=\u父项；
}
updatePbiRelease（发布值、标题）{
this.appComponent.updatePbiRelease（releaseValue）；
this.title=标题；
}
私有下拉菜单（$event:MouseEvent）：无效{
$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>

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

释放（切换）
//尝试将页面加载上的下拉选择值设置为TS 2上DB的标题
{{title}}

//迭代releaseName已从父模板传递了值
//从DB（即item.releaseId）获取与releaseId和Id匹配的名称（即标题）

{{data.name}

---

任何帮助都会很好。

对模板和ngOnInit（）进行了以下更改

模板：

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

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

模板：`
释放（切换）
{{title}}


{{data.name}


`,

在父模板的releaseName上添加了if条件

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

使用从父模板selectedReleaseId传递的id，在页面加载onInit上设置标题值

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

ngOnInit（）{
对于（var x=0；x

这是什么

[（isOpen）]

？它的方法与触发下拉事件值的组件一起提供。我看他们是如何做到的。好啊我认为您必须尝试像[（NgModel）]=“title”这样的绑定，而不是像{{title}}。我将在NgModel上尝试..我尝试了不同的方法设置标题，如{data.name}，但引发了原始异常：''没有值访问器。请更正语法好吗