No puedo seleccionar las opciones de mat-select y no puedo hacer que la opción seleccionada aparezca en la consola.
Tengo el siguiente problema: Tengo una lista desplegable con 2 elementos. Necesito que el primero aparezca de manera predeterminada y que al seleccionar cualquiera de los dos se muestre su valor en la consola y se guarde en una variable. Tengo el siguiente código:
HTML
<td>
<mat-select name="tipoCdp" (change)="onChangeCdp($event.value)" [(ngmodel)]="tipoCdpValue">
<ng-container *ngfor="let gas of tipoc">
<mat-option [value]="gas.viewValue">
{{gas.viewValue}}
</mat-option>
</ng-container>
</mat-select>
</td>
TS
interface tipoCdp {
value: string;
viewValue: string;
}
@Component({
selector: '...',
templateUrl: '...',
styleUrls: ['...']
})
export class showValue implements OnInit {
constructor (...) { ... }
tipoc: tipoCdp[] = [
{value: 'gasto-0', viewValue: 'GASTO'},
{value: 'modificacion-1', viewValue: 'MODIFICACIÓN ANEXO DECRETO'}
];
//selected = this.tipoc[0].value; --> /* Con esta línea seleccionaba el primer elemento pero el valor estaba fijo */
onChangeCdp(event) {
console.log(event);
this.tipoc = event;
}
}
Cuando ejecuto el programa, en “event” aparece el elemento seleccionado, pero luego aparece el siguiente error en la consola:
“Error al intentar diferenciar ‘GASTO’. Solo se permiten matrices e iterables”
¡Gracias por tu ayuda!
davy.ai
Para que el primer elemento aparezca por defecto, establezca el valor de ngModel como el valor del primer elemento:
Para guardar el valor seleccionado en una variable, use el evento onChange y pase $event.value como parámetro:
En su archivo TS, declare una variable para contener el valor seleccionado:
En el método onChangeCdp, establezca selectedValue como el valor pasado:
Esto debería imprimir el valor seleccionado en la consola y guardarlo en la variable selectedValue.