Regarding multiple mat autocomplete.

Question

Dear all,

Hope you are doing well. I am facing one problem whicle creating one component in Angular 6 and ASP .Net MVC with Rest API.

I have a table structured form and in last column there a button add new. 

If i click on that button then I am creating another row using ngFor.

 

<tr *ngFor="let item of itemsList ; let i = index; ">
<td>
  <mat-form-field class="container-fluid" style="padding: 0px;">
  <!-- ADD AN INPUT BOX OF TYPE TEXT AND LINK IT TO THE AUTO COMPLETE PANEL. -->
 <input type="text" matInput [formControl]="searchTerm" id="filter{{i}}"
 name="filter{{i}}" [(ngModel)]="product[i]" [matAutocomplete]="auto">
<!-- CREATE AUTO COMPLETE PANEL WITH OPTIONS. -->
 <mat-autocomplete #auto="matAutocomplete">
 <mat-option  *ngFor="let item of productlist" [value]="item.ItemName">
   {{ item.ItemName }}
 </mat-option>
 </mat-autocomplete>
 </mat-form-field>
 </td>
<td>
  <button (click)="AddNewRow()">AddRow</button>
</td>
</tr>

my problem is that I am not able to keep hold those values selected in auto completer.

Please let me know if anyone have an easy solution.

Thanking in advanced.

Regards.