When using an Angular 4 bootstrap table, I am encountering an issue where only the first row value is displayed in the table from the backend when entering a product in the text box and pressing enter. Even though the alert window shows the data for the second row as well, it is not displaying in the table. How can I add multiple row values to the table?
alert: In my alert window, the data being shown is ----[[2,"second",1,1,2,1,1,10.2,1]]
ang.html:
<div class="col-lg-4">
<label class="col-form-label labal">Product Name</label>
<input type="text" class="form-control inputline" placeholder="Search Product Name" name="brand" id="brand" list="brandlist" (change)="getBrandlist($event)">
<datalist id="brandlist" name="brandlist" (change)="getBrandlist($event)"> </datalist> </div>
<table>
<thead>
<th>#</th>
<th>Product Id</th>
<th>Product Name</th>
<th>Formulation</th> </thead>
<tbody>
<tr *ngFor="let brand of brandlist; let i = index">
<td>{{ i + 1}} </td>
<td>{{brand[i][0]}}</td>
<td>{{brand[i][1]}}</td>
<td>{{brand[i][2]}}</td>
</tr>
</tbody>
</table>
component.ts:
brandlist=[];
getBrandlist($event)
{
let val=$event.target.value
this.invoiceService.getBrandlist(val).subscribe(data => {this.getTabledata(data)},
error=>
{
console.log('Error occurred On getBrandlist');
});
}
getTabledata(data)
{
if(data!==undefined || data!==null)
{
alert(JSON.stringify(data));
this.brandlist.push(data);
}
}