Quiero implementar un selector de temas para mi aplicación Angular que usa el diseño de materiales, pero no puedo hacer que funcionen los botones de opción.
Encapsulé todo lo relacionado con la tematización en un servicio propio, incluida una función getThemes() que devolvía una matriz de nombres de temas. El servicio se inyecta correctamente y todo se procesa correctamente, pero no puedo cambiar los valores de las radios. Aquí están ambos enfoques uno al lado del otro:
<mat-radio-group> <!-- getThemes() inside my provider returns a hardcoded array, no async stuff --> <!-- Things render correctly but buttons are not clickable --> <mat-radio-button *ngFor="let theme of themeSelector.getThemes()" [value]="theme.name"> {{theme.name}} </mat-radio-button> </mat-radio-group> <mat-radio-group> <!-- Exactly the same as before but now with hardcoded array inside my component --> <!-- Everything works as expected --> <mat-radio-button *ngFor="let theme of themes" [value]="theme.name"> {{theme.name}} </mat-radio-button> </mat-radio-group>Puede que la app no espere correctamente a que finalice el servicio pero como no hay asincronía esperaba que la cosa fuera menos complicada.
DevTools revela que los atributos [valor] están configurados correctamente después de que se haya cargado la página.
Cualquier ayuda sería realmente apreciada, pero si eso complicara las cosas, preferiría definir los temas directamente dentro del componente (aunque probablemente esta no sea la mejor manera).
EDITAR: según lo solicitado, la función getThemes() :
getThemes = (): Theme[] => { return [ { name: 'deeppurple-amber' }, { name: 'indigo-pink' }, { name: 'pink-bluegrey' }, { name: 'purple-green' } ]; }; , donde Theme es un tipo que consta solo de un nombre.
Es mejor no usar funciones en directivas angulares porque esas funciones pueden llamarse varias veces en lugar de una sola vez (sin cambio de valor), puede hacer algo como
this.themes = this.themeSelector.getThemes()
en ngOnInit para evitar eso.
Si eso no funcionó, el problema podría deberse a que themeSelector.getThemes () está devolviendo una matriz vacía en lugar de nula, en ese caso puede cambiar los datos devueltos o rodear * ngfor con
*ngif(datos && datos.longitud > 0)
Use getTheme() como captador en lugar de una función dentro de su servicio, que es más ideal para su caso de uso, y luego llámelo en cualquier lugar como una variable (sin ()).
como esto -
myThemes = [ { name: 'deeppurple-amber', }, { name: 'indigo-pink', }, { name: 'pink-bluegrey', }, { name: 'purple-green', }, ]; get themes() { return this.myThemes; }ver el ejemplo de trabajo aquí
Si bien las respuestas sugeridas funcionan correctamente, descubrí la razón real por la que fallaba mi primer enfoque.
Creé una nueva matriz cada vez que se llamó al método getThemes y, por lo tanto, cada matriz era un objeto nuevo, lo más probable es que estropeara el enlace de datos.