选择实现不显示数据角度

Question

我正在使用与Angular集成的Laravel框架，并且正在使用API​​S，所以当请求api获取数据时，我的选择实现未显示数据，但是在我的.ts中，我有一个控制台可以查看此数据并获取数据，但查看不到

我的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>

但没有结果，为什么？