Lo que se quiere hacer quizá sea un poco rebuscado. Tengo un intervalo de fecha/hora que disparan una consulta a la base de datos. Estos datos son el contenido con el cual necesito llenar a este selector, y necesito que el selector se llene quede seleccionado el primer elemento.
Hasta el momento lo que tengo logrado es que el selector cargue el contenido de lo que trae la base de datos pero no sé como hacer para que de ese contenido muestre el primero.
HTML:
<form [formGroup]="formGateway">
<mat-form-field class="textBox" appearance="fill">
<mat-label> Gateway seleccionado </mat-label>
<mat-select
formControlName="gatewayId"
>
<mat-option
*ngFor="let gw of basicGatewayDTO"
[value]="gw.gateway_id"
>
{{ gw.gateway_name }}
</mat-option>
</mat-select>
</mat-form-field>
</form>
TypeScript:
formGateway: any;
basicGatewayDTO: basicGatewayDTO[] = [];
constructor(
private formBuilder: FormBuilder,
) {
this.formGateway = formBuilder.group({ gatewayId: new FormControl('') });
}
ngOnInit(): void {
this.FiltrarGateways().then((respuesta) => {
let respStr = JSON.stringify(respuesta);
this.basicGatewayDTO = JSON.parse(respStr);
});
}
Resumí el código para que se entienda cómo lo estoy manejando (por ejemplo no se muestra el método que retorna la promesa que trae la información), sin embargo estoy abierto a otras formas de realizarlo.
Lo que quiero hacer es setear la propiedad del selector a que tenga seleccionado el primer index o primera opción, suponiendo que lo que trae la base de datos exista. Podría ser algo así como esto:
setValueSelector(valor: string){
this.formGateway.gatewayId.setValue(valor);
}
O en lugar de establecer el valor, establecer la posición, la opción, lo que sea mejor y más práctico para darle solución.
Agradezco cualquier información al respecto