Select from angular2-material does not work when loading data from an observable
alissonb13 opened this issue · 0 comments
I'm having trouble trying to load the options of a select with data from an observable.
My component code:
declare var $: any;
@Component({
selector: 'app-home-page-eventos',
templateUrl: './home-page-eventos.component.html',
styleUrls: ['./home-page-eventos.component.css']
})
export class HomePageEventosComponent implements OnInit {
ngOnInit() {
$(document).ready(function() {
$('select').material_select();
});
}
}
My HTML template looks like this:
<div class="col l2 m2 s6 input-field">
<select class="home-page-select home-page-eventos-select" materialize="material_select">
<option value="" disabled selected>Estado</option>
<option value="">São Paulo</option>
<option value="">Rio de Janeiro</option>
<option [value]="state.name"
*ngFor="let state of (responseStates$ | async)">
{{state.name}}
</option>
</select>
</div>
The observable $ responseStates retrieves the data as expected, and if I inspect the HTML generated in the browser I can see a completely filled select with the data I expect. But this data is not loaded in the select dropdown on the screen.
I've read that the material_select () function has been deprecated and should now use the formSelect () function. However, when I do this substitution I get error messages in the console stating that the formSelect function can not be found in the file materialize.js, and in fact when I go to the file I can only find the material_select () function.
I'm using version 15.1.10 of the angular2-materialize package.