如何使用angular 4在bootstrap表中动态添加行值?

问题描述 投票:0回答:1

我正在使用angular 4 bootstrap表:当我在文本框中输入一个产品而我点击输入按钮我从后端获得表中的第一行值,但我再次在文本框中输入另一个产品第二行值不显示在表,我给出了警告窗口它显示第二行值也...如何在表中添加第二行或多行值???

警报:在我的警报窗口显示数据---- [[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 occured On getBrandlist');
            });     
      }
      getTabledata(data)
      {
        if(data!==undefined || data!==null)
        {
          alert(JSON.stringify(data));
          this.brandlist.push(data);     
        }
      }
angular typescript
1个回答
0
投票

我假设品牌列表中的数据是

[[1,"first",1,1,2,1,1,10.2,1],


[[2,"second",1,1,2,1,1,10.2,1]]]

从那以后,它适用于第一个阵列

row 1 brand[0][0]=which is 1

row 2 brand[1][0]=which is [2,"second",1,1,2,1,1,10.2,1]

只需在添加第二项/行后尝试alert(JSON.stringify(brandlist));cosole.log(brandlist);

© www.soinside.com 2019 - 2024. All rights reserved.