Select from angular2-material does not work when loading data from an observable

[alissonb13]

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.