Question

此select语句代码无法设置组件的默认文本。

<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';
  }

Answer 1

看起来ngModel不应该是selectedDepartment，因为selectedDepartment是一个字符串，但是部门数组包含对象数组。

看这里：

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

很明显：部门是对象

在这里你要分配字符串：

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

看起来像一堆类型和变量

在angular2中选择无法设置默认文本

1 个答案: