Question

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

我可以在点击按钮上提取下拉值并使用Typescript保留选择但无法在页面加载时设置所选值，就像我们使用select选项一样：

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

任何帮助都会很棒。

Answer 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，在页面加载onInit 上设置标题值

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

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

1 个答案: