Async options in select are not reflected

[shindekaps]

Ng for not working for select component

[jfcere]

Hi @shindekaps,

I am not really sure I understand the problem as I would need more information.

To use ngFor on options you can follow the example below ...

example.component.html

<mz-select-container>
  <select mz-select
    id="select-number"
    [label]="'Number'"
    [placeholder]="'Choose a number'"
    [(ngModel)]="optionValue">
    <option *ngFor="let option of ['one','two','three','four']" [selected]="option === optionValue">{{ option }}</option>
  </select>
</mz-select-container>

OptionValue => {{ optionValue }}

example.component.ts

public optionValue: string;

If it does not solve your issue please provide a sample of your code.

Thanks,

[shindekaps]

Hi,
*ngFor is working when data is hard coded. When the data is coming asynchronous then it not working. Also I got workaround when we use ngIf then it is working.
E.g.

<mz-select-container>
  <select mz-select
    id="select-number"
    [label]="'Number'"
    [placeholder]="'Choose a number'"
    [(ngModel)]="optionValue">
    <option *ngFor="let option of comapnyList" [selected]="option === optionValue">{{ option }}</option>
  </select>
</mz-select-container>

where companyList is coming from server.Above example is not working. But when we add *ngIf then it is working
E.g.

<mz-select-container *ngIf="comapnyList.length>0">
  <select mz-select
    id="select-number"
    [label]="'Number'"
    [placeholder]="'Choose a number'"
    [(ngModel)]="optionValue">
    <option *ngFor="let option of comapnyList" [selected]="option === optionValue">{{ option }}</option>
  </select>
</mz-select-container>

Thanks
Kapil Shinde

[charpeni]

Thank you for the reporting, you're right there're bugs with async options.

We're on it.

[charpeni]

@shindekaps it should be fixed by #91 and it will be released to npm in the next days/weeks.

If there is anything else or if the issue is not properly fixed, feel free to ping us.