1

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'];
  }
}
4
  • El ngFor itera sobre arrays, no sobre funciones, lo que podrias hacer es que la dentro de la funcion le asignas a un array. this.newArray = (el array que devuelve la función) luego iteras es sobre esa respuesta *ngFor="let food of newArray"
    – ayaleil
    Commented el 8 nov. 2022 a las 19:35
  • opciones tengo, básicamente quisiera saber si esto es posible hacerlo considerando que el uso de funciones es posible si la funcion retorna un arreglo simple de strings, pero no un arreglo de objetos
    – LPZadkiel
    Commented el 8 nov. 2022 a las 19:57
  • Tu error debe estar en otra parte. La función retorna bien los datos. Mira este ejemplo funcional
    – Legna
    Commented el 8 nov. 2022 a las 22:28
  • el ejercicio se ve bien, el problema debe ser con angular-material
    – LPZadkiel
    Commented el 9 nov. 2022 a las 12:27

1 respuesta 1

0

Alguien me dio la respuesta:

La aplicación se congela porque mat-option intenta hacer render de todos los cambios una y otra vez sin parar, esto sucede porque se está usando una función que retorna un objeto "complejo" y no un objeto simple (string array), entonces esta en todo momento ejecutando la función para saber si hay cambios

Solución:

usar trackBy

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(); trackBy: trackedValue"
      [value]="food.value"
    >
      {{ food.viewValue }}
    </mat-option>
  </mat-select>
</mat-form-field>

archivo ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  constructor() {}

  data(): any[] {
    console.log('Get value');
    return [
      { value: 'steak-0', viewValue: 'Steak' },
      { value: 'pizza-1', viewValue: 'Pizza' },
      { value: 'tacos-2', viewValue: 'Tacos' },
    ];
  }

  trackedValue(index, item) {
    return item.value;
  }
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.