CODEWITHSUNDEEP
angulartypescript
Avinash Raj
Avinash Raj

Reputation: 174786

select in angular2 failed to set the default text

This select statement code failed to set the default text from the component.

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

On template, the above code generates.

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

You see, the department Development is selected by default. But the dropdown shows Select A Department as default.

A part of SelectDepartmentComponent looks like

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

Upvotes: 0

Views: 1070

Answers (1)

Roberc
Roberc

Reputation: 1956

It looks like ngModel should not be the selectedDepartment, because the selectedDepartment is a string, but array of departments contains array of objects.

Look here:

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

It's obvious: department is object

And here you're assigning the string:

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

Looks like a mess of types and variables

Upvotes: 1

Related Questions