vladotesanovic / ngSemantic

Angular 2 building blocks :package: based on Semantic UI
https://ng-semantic.herokuapp.com/
MIT License
973 stars 148 forks source link

sm-select active item doesn't work for me #153

Open PitPanda1 opened 7 years ago

PitPanda1 commented 7 years ago

Hey there,

I have a problem to get sm-select's pre selection to work. In my Component I have the property "status" for the model i am using for sm-select and in my HTML-Template I have the following code:

<sm-select [options]="{direction: 'downward'}" (onChange)="onFilterChange('status', $event)" [(model)]="status" placeholder="Status...">
  <option *ngFor="let item of issueModel?.status" [value]="item.id"><i class="icon {{item.icon}}"></i>{{item.name}}</option>
</sm-select>

Now when I load the site with URL parameters http://.../site?status=1, the active item is not pre selected.

All is rendered fine and my selection is set properly in the status property in my component but its not pre-selected in the dropdown.

When I manually add an option field like so:

<sm-select [options]="{direction: 'downward'}" (onChange)="onFilterChange('status', $event)" [(model)]="status" placeholder="Status...">
  <option value="9">Nine</option>
  <option *ngFor="let item of issueModel?.status" [value]="item.id"><i class="icon {{item.icon}}"></i>{{item.id}}</option>
</sm-select>

I can visit the URL http://.../site?status=9 and the active item is set correct to "Nine" in the dropdown. I think it's a bug when using ngFor?

Anyone have a suggestion for my problem?

Greetings

sguiheux commented 7 years ago

<sm-select *ngIf="issueModel"> will solve your problem.

PitPanda1 commented 7 years ago

Haha yea thx. I found it already myself. :)

snstarosciak commented 7 years ago

Nice, this helped :) Is there any way to initiate the onChange event when the model gets updated?