Obtengo algunos datos del backend que json se ve así:

 { "id":1, "name":"Colombia La Serrania Omniroast Decaf", "manufacturer":{ "id":16, "name":"3fe" }, "manufacturerId":16

Solo me importan 2 campos: el nombre del café y el nombre del fabricante, por lo que es café.nombre y café.fabricante.nombre Lo que quiero hacer es crear una selección con opciones de nombre de café que se agrupan por nombre del fabricante. Algo como eso:

Ahora mismo tengo esto:

 <select> <optgroup *ngFor="let coffee of CoffeeList" label="{{coffee.manufacturer.name}}"> <option *ngFor="let item of coffee" [ngValue]="item.id">{{item.name}}</option> </optgroup> </select>

Pero obviamente no está funcionando. Obteniendo: Error: no se puede encontrar un objeto de soporte diferente '[objeto Objeto]' del tipo 'NombreCafé'. NgFor solo admite el enlace a Iterables como Arrays. ya que el café no es iterable. En la mayoría de los ejemplos que he visto, generalmente hay una lista dentro de un objeto, pero no en mi caso. No tengo idea de cómo hacerlo funcionar.

Atractivo:

 CoffeeList: any[] = []; getCoffeesList(){ this.service.getCoffees().subscribe(data => { this.CoffeeList = data; }) }