Выберите материализовать не показывает данные угловые

Question

Я использую интегрированные с Angular фреймворки Laravel и работаю с APIS, поэтому при запросе api для получения данных моя выбранная материализация не показывает данные, но в моем .ts у меня есть консоль для просмотра этих данных и его получить данные, но не

my service.ts

getRoles() {
    return this.http.get(`${this.api}`)
        .toPromise();
        // .then( response => response.json());
}

теперь в моем component.ts у меня есть следующий метод

ngOnInit() { 
    this.rService.getRoles()
        .then((res) => {
          console.log(res)
          this.roles = res;
        })
}

так что, на мой взгляд, выберите

<select formControlName="role" [(ngModel)]="user.role">
    <option value="" disabled selected>Escolha a função</option>
    <option *ngFor="let role of roles" [ngValue]="role.id">{{ role?.name }}</option> 
</select>
<label>Materialize Select</label>

но не имеют результата, почему?