In my application, I have the following code snippet. The issue is that this code resides in each table column header. Therefore, whenever I click on a mat-select option, new values are generated and used in an *ngFor loop for mat-option.
The problem arises when clicking on one column header loads data into all mat-select options in the columns. This leads to difficulty in persisting user selections after clicking on another mat-select option.
Does anyone know how to limit ngFor to only once on mat-select or have any other suggestions on preserving user selection after clicking on another mat-select?
<mat-form-field >
<mat-select placeholder="Banks" #{{headerName}} (click)=getColumnData(i) multiple>
<!-- <mat-select-search [formControl]="bankMultiFilterCtrl"></mat-select-search> -->
<mat-option #{{headerName}}. (onSelectionChange)="sorton(-1, -1)" id="clearopt">Clear filter</mat-option>
<mat-option *ngFor="let record of currentddvalues " (onSelectionChange)="sorton(i, record)" id={{record}} >
{{record}}
</mat-option>
</mat-select>
</mat-form-field>