Currently, I have an Angular screen that displays data from a database using a Java REST API. There is a field called esValido which only contains values of 1 and 0 as shown in the initial image.
https://i.sstatic.net/R4WCc.png
My goal is to implement a mat-select component for the esValido field, displaying the values Yes and No, where Yes corresponds to 1 and No corresponds to 0.
Although the mat-select component successfully shows the values Yes and No, my challenge is to have it display the default value fetched from the database upon entering the screen, as shown in the initial image. However, the default value is not being displayed.
https://i.sstatic.net/tFyrp.png
I have attempted to utilize the [value] property but it does not seem to work. Is there something crucial I am missing in order to display the default value?
Here is the HTML code snippet:
<ng-container matColumnDef="esValido">
<th mat-header-cell *matHeaderCellDef> ES VALIDO </th>
<td mat-cell *matCellDef="let element">
<mat-select [value]="element.esValido">
<mat-option *ngFor="let valid of esValidoArr" [value]="valid.valor">
{{ valid.label}}
</mat-option>
</mat-select>
</td>
</ng-container>
And here is the relevant code snippet from the component.ts file:
esValidoArr = [
{ label: 'Yes', valor: 1 },
{ label: 'No', valor: 0 },
];
// Retrieve list from service
dataSource: any;
private obtenerLista() {
this.controlService.obtenerLista().subscribe((response) => {
this.control = response.data;
this.dataSource = new MatTableDataSource(this.control);
this.dataSource.paginator = this.paginator;
});
}
Is there an alternative method to achieve this? How can I utilize the [selected] property to achieve the desired outcome?
I appreciate any assistance you can provide. Thank you.