Angular2 typescript在页面加载时设置选定的下拉按钮值答案

【问题标题】：Angular2 typescript set selected dropdown button value on page loadAngular2 typescript在页面加载时设置选定的下拉按钮值
【发布时间】：2016-10-13 10:31:18
【问题描述】：

参考：尝试使用下拉组件https://github.com/valor-software/ng2-bootstrap/tree/development/components/dropdown

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

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

父模板：

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

对象：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>

任何帮助都会很棒。

【问题讨论】：

这是什么[(isOpen)]？
github.com/valor-software/ng2-bootstrap/blob/development/…中的方法自带触发下拉事件值的组件
我知道他们是怎么做到的。好的。我认为你必须尝试像 [(NgModel)]="title" 而不是 {{title}} 的绑定。
我会试试 ngModel..
我尝试了不同的方式设置标题，如 {{data.name}} 但抛出原始异常：'' No value accessor can you please更正语法

标签： twitter-bootstrap-3 typescript angular

【解决方案1】：

对 Template 和 ngOnInit() 进行了以下更改以使其正常工作

模板：

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

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

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

使用从父模板 selectedReleaseId 传递的 id 设置 page load onInit 上的标题值

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

【讨论】：