No se puede obtener el valor del botón de radio seleccionado con *ngFor en Angular 11.
PLANTILLA:
Archivo TS:
radioForm: FormGroup = new FormGroup({
list: new FormControl(),
});
list: List[]=[];
num: any;
ngOninit(){
this.list = this.template.lists;
}
La matriz de listas en la consola contiene tres valores… nombre, color y num.
Al seleccionar el botón de radio, quiero obtener el valor num de la lista. ¿Cómo puedo lograr eso?
davy.ai
En el archivo TS, puedes suscribirte a los cambios en el control de formulario “list” utilizando el método valueChanges del control de formulario. Luego, puedes obtener el valor seleccionado del botón de opción y usarlo para filtrar el array “list” y obtener el valor correspondiente de “num”.
Aquí está el código para lograr eso:
// Importa los módulos requeridos en la parte superior del archivo TS
import { Subscription } from ‘rxjs’;
// Dentro de la clase del componente
selectedValue: any;
listSubscription: Subscription;
ngOnInit() {
this.list = this.template.lists;
this.listSubscription = this.radioForm.controls[‘list’].valueChanges.subscribe(selectedOption => {
this.selectedValue = selectedOption;
const selectedList = this.list.find(item => item.num === this.selectedValue);
console.log(selectedList.num); // Esto imprimirá el valor de “num” del botón de opción seleccionado
});
}
// No te olvides de cancelar la suscripción para evitar fugas de memoria
ngOnDestroy() {
if (this.listSubscription) {
this.listSubscription.unsubscribe();
}
}