Estoy intentando hacer el uso de Angular Material MatSelect pero estoy usando un array de objetos que obtengo desde una función
Ejercicio básico que funciona
archivo html
<h4>Basic mat-select</h4>
<mat-form-field appearance="fill">
<mat-label>Favorite food</mat-label>
<mat-select>
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
archivo ts
import {Component} from '@angular/core';
interface Food {
value: string;
viewValue: string;
}
/**
* @title Basic select
*/
@Component({
selector: 'select-overview-example',
templateUrl: 'select-overview-example.html',
})
export class SelectOverviewExample {
foods: Food[] = [
{value: 'steak-0', viewValue: 'Steak'},
{value: 'pizza-1', viewValue: 'Pizza'},
{value: 'tacos-2', viewValue: 'Tacos'},
];
}
lo que quiero hacer y no funciona, de hecho la aplicación web se queda congelada y no muestra errores en consola
archivo html
<h4>Basic mat-select</h4>
<mat-form-field appearance="fill">
<mat-label>Favorite food</mat-label>
<mat-select>
<mat-option *ngFor="let food of data()" [value]="food.value">
{{food.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
archivo ts
import {Component} from '@angular/core';
interface Food {
value: string;
viewValue: string;
}
/**
* @title Basic select
*/
@Component({
selector: 'select-overview-example',
templateUrl: 'select-overview-example.html',
})
export class SelectOverviewExample {
foods: Food[] = [
{value: 'steak-0', viewValue: 'Steak'},
{value: 'pizza-1', viewValue: 'Pizza'},
{value: 'tacos-2', viewValue: 'Tacos'}
];
data(): Food[] {
return [
{value: 'steak-0', viewValue: 'Steak'},
{value: 'pizza-1', viewValue: 'Pizza'},
{value: 'tacos-2', viewValue: 'Tacos'}
];
}
}
como dato extra, el siguiente ejemplo si funciona en el cual en la función retorno un arreglo simple de string y no un arreglo de objetos
archivo html
<h4>Basic mat-select</h4>
<mat-form-field appearance="fill">
<mat-label>Favorite food</mat-label>
<mat-select>
<mat-option *ngFor="let food of data()" [value]="food">
{{food}}
</mat-option>
</mat-select>
</mat-form-field>
archivo ts
import {Component} from '@angular/core';
interface Food {
value: string;
viewValue: string;
}
/**
* @title Basic select
*/
@Component({
selector: 'select-overview-example',
templateUrl: 'select-overview-example.html',
})
export class SelectOverviewExample {
foods: Food[] = [
{value: 'steak-0', viewValue: 'Steak'},
{value: 'pizza-1', viewValue: 'Pizza'},
{value: 'tacos-2', viewValue: 'Tacos'},
];
foods2 = ['Steak', 'Pizza', 'Tacos'];
data(): string[] {
return ['Steak', 'Pizza', 'Tacos'];
}
}