0

I am facing one problem while creating one component in Angular 6 and ASP .Net MVC with Rest API. I have a table structured form and in last column there is a button "Add new". If I click on that button then I am creating another row using ngFor. my problem is that I am not able to keep hold those values (product name) selected in auto completer. Please let me know if anyone have an easy solution. Thanking in advanced. Regards.

<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>
Mandar
  • 1
  • 1
  • I believe you'll get an error as you will have multiple `#auto="matAutocomplete"` and `[matAutocomplete]="auto"` pairs repeating the template local variable `auto` – Andrew Allen Jul 31 '19 at 11:13
  • @AndrewAllen sir I am not getting any kind of error. only thing is mat - autocomplete is not retaining its value, when I try to add new row. – Mandar Jul 31 '19 at 11:17
  • can you stick this in a stackblitz or provide the `AddNewRow` ts code? – Andrew Allen Jul 31 '19 at 11:22
  • //Add row AddNewRow() { var index = this.itemsList.length - 1; var productItem = $('#filter' + index).val(); this.product[index] = productItem ; this.itemsList.push(productItem); } – Mandar Jul 31 '19 at 11:30

0 Answers0