Hey there, I've got a piece of code that needs some tweaking:
<div>
<div *ngIf="!showInfo">
<div>
<br>
<table style="border: 0px; display: table; margin-right: auto; margin-left: auto; width: 155%;">
<tbody>
<tr>
<th style="color: black;border: 0px;">Type</th>
<th style="color: black;border: 0px;">Radius</th>
<th style="color: black;border: 0px;">Number</th>
</tr>
<br>
<tr *ngFor="let row of groups;let i = index">
<td style=" border: 0px;" >
<input #focus matInput type='text' style=" border: 0px;" type="text" value="{{row.type}}" readonly [(ngModel)]="row.type" >
</td>
<td>
<select (change)="changeRadius($event, i)" attr.id="{{row.id}}" [value]="5000">
<option *ngFor="let meters of radius" [value]="meters.value">{{meters.value}}</option>
</select>
</td>
<td style="margin-left: 60px; border: 0px;">
<input matInput type='text' style="margin-left: 30px; border: 0px;" readonly type="text" value="{{row.number}}" [(ngModel)]="row.number">
</td>
</tr>
</tbody>
</table>
<hr style="color: darkred;" >
<div>
<button mat-button class="custom-button" (click)="getNewRadius()">
OK
</button>
The first time this table is displayed, I want each select to default to 5000. Then the user can choose a new radius for each select and click OK. In my TypeScript file, I have an array called "radiousToSend" that stores the selected radii. Now, whenever this table reappears, I want the selects to default to the last chosen radius from "radiousToSend."
I attempted to achieve this with the following code snippet:
let pan = (<HTMLInputElement>document.getElementById('1'));
pan[0].options[pan[0].options.selectedIndex].selected = true;
Unfortunately, it didn't work as expected because every time the table appears, all the selects default back to 5000. I only want them to stay static the very first time.