在angular2中選擇無法設置默認文本

此選擇語句代碼無法設置組件的默認文本。在angular2中選擇無法設置默認文本

<select class="selectpicker" data-style="btn btn-primary btn-round" title="Select a Department" [(ngModel)]="selectedDepartment" 
    (ngModelChange)="onChangeDepartment()" required> 
     <option *ngFor="let department of departments" 
     [ngValue]="department" [selected]="department.name == selectedDepartment"> 
     {{department.name}} 
     </option> 
</select>

在模板上，生成上面的代碼。

<nb-select-department _ngcontent-ems-27="" _nghost-ems-28="" ng-reflect-departments="[object Object],[object Object]" ng-reflect-department="Development"><div class="btn-group bootstrap-select ng-untouched ng-pristine ng-valid"><button type="button" class="dropdown-toggle bs-placeholder btn btn-primary btn-round" data-toggle="dropdown" role="button" title="Select a Department" aria-expanded="false"><span class="filter-option pull-left">Select a Department</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span></button><div class="dropdown-menu open" role="combobox" style="max-height: 162px; overflow: hidden; min-height: 0px;"><ul class="dropdown-menu inner" role="listbox" aria-expanded="false" style="max-height: 162px; overflow-y: auto; min-height: 0px;"><li data-original-index="1"><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text"> 
      Development 
      </span><span class="material-icons check-mark"> done </span></a></li><li data-original-index="2"><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text"> 
      Management 
      </span><span class="material-icons check-mark"> done </span></a></li></ul></div><select _ngcontent-ems-28="" class="selectpicker ng-untouched ng-pristine ng-valid" data-style="btn btn-primary btn-round" required="" title="Select a Department" ng-reflect-model="Development" tabindex="-98"><option class="bs-title-option" value="">Select a Department</option> 
      <!--template bindings={ 
     "ng-reflect-ng-for-of": "[object Object],[object Object]" 
    }--><option _ngcontent-ems-28="" value="0: Object" ng-reflect-ng-value="[object Object]" ng-reflect-selected="true"> 
      Development 
      </option><option _ngcontent-ems-28="" value="1: Object" ng-reflect-ng-value="[object Object]"> 
      Management 
      </option> 
    </select></div> 
    </nb-select-department>

您會發現，部門默認爲Development。但下拉菜單默認爲Select A Department。

的SelectDepartmentComponent的一部分看起來像

@Input() departments: any; 
    @Input() department: string; 
    @Output() done: EventEmitter<any> = new EventEmitter(); 
    selectedDepartment: string = 'Select A Department'; 
    value: string; 

    constructor() { } 

    ngOnInit() { 
    this.selectedDepartment = this.department || 'Select A Department'; 
    }

來源

2017-01-09 Avinash Raj

我設法解決這個問題，用'[value] =「department.name」[attr.sel ected] =「department.name === selectedDepartment」>' –

看起來ngModel不應該是selectedDepartment，因爲selectedDepartment是一個字符串，但各部門的數組包含對象的數組。

看吧：

[selected]="department.name == selectedDepartment"

很明顯：部門對象

在這裏你要指定字符串：

this.selectedDepartment = this.department || 'Select A Department';

貌似的類型和變量

一個爛攤子

來源

2017-01-09 11:36:45 Roberc

ya，department是對象，但'department.name'是一個字符串。 –

我想說的是：您在Select控件中工作的數據是對象數組。 Select的初始化後有對象，而不是字符串...你應該繼續用console.log（）和谷歌瀏覽器開發工具檢查你的代碼和數據;） – Roberc

在angular2中選擇無法設置默認文本

回答

相關問題