In an Angular component I have a table as below, so that on each row there is a mat-select element:

<table mat-table [dataSource]="data">

<ng-container matColumnDef="template">

      <th mat-header-cell *matHeaderCellDef>Column Title</th>
      <td mat-cell *matCellDef="let element; let n = index;">

      <mat-select [(ngModel)]="value"
        #drop
        placeholder="Select numbers"
        multiple
      >
      <mat-select-trigger *ngIf="drop.value && drop.value.length">
        {{getDropTextBoxValue(drop, n)}}
      </mat-select-trigger>
        <mat-option #all (click)="onClick(all, drop)" [value]="null">Select all</mat-option>
        <mat-option *ngFor="let num of allNums[n]" [value]="num" (click)="onClick(null, drop, n)">
          {{num}}
        </mat-option>
      </mat-select>

 </td>
    </ng-container>

</table>

So we can see that each mat-select is given the same idetifier, #drop

How can I make it so that each one has a unique identifier based on it’s row (which I have in the variable n) – say for instance something like drop1, drop2, drop3 etc..

And if I do that then how can I refer to these unique identifiers in each of the following lines (i.e. in the below lines what should take the place of each instance of drop)?:

<mat-select-trigger *ngIf="**drop**.value && **drop**.value.length">
        {{getDropTextBoxValue(**drop**, n)}}


        <mat-option #all (click)="onClick(all, **drop**)" [value]="null">Select all</mat-option>

        <mat-option *ngFor="let num of allNums[n]" [value]="num" (click)="onClick(null, **drop**, n)">