Question

我正在创建一个有角度的表，如何在表中生成具有不同数据的新行，例如我在纯Js中执行此代码。我可以在调用addRow（）方法时生成一个新行。我是棱角分明的新手，我意识到这不是棱角分明的方式。请你帮忙我怎么能在角度上达到同样的目的。一切都很好，但我卡住了，因为我发现我无法在行row.insertCell(5).innerHTML= '<button (click)="deleteFunc()">click</button>';中创建一个按钮，但这不起作用。

addRow(){
     let table = document.getElementById("tableData");
     let rowcount = table.rows.length;
     let row = table.insertRow(rowcount);
     
     row.insertCell(0).innerHTML= rowcount;
     row.insertCell(1).innerHTML= this.qty;
     row.insertCell(2).innerHTML= this.log;
     row.insertCell(3).innerHTML= this.kw;
     row.insertCell(4).innerHTML= this.frame;
     row.insertCell(5).innerHTML= '<button (click)="deleteFunc()">click</button>';
     }

<table id="tableData" border="1" >
  <tr>
    <th>S.No.</th>
    <th>Qty</th>
    <th>Type Refrence</th>
    <th>KW Rating</th>
    <th>Frame Size</th>
    <th>Operation</th>
  </tr>
</table>

Answer 1

这在Angular中要容易得多。您只需将数据存储在一个数组中。然后，您可以通过*ngFor迭代它。

TS：

rows: any = [{
    number: 0,
    qty: 'somevalue',
    log: 'somevalue',
    kw: 'somevalue',
    frame: 'somevalue'
},{
    number: 1,
    qty: 'somevalue2',
    log: 'somevalue2',
    kw: 'somevalue2',
    frame: 'somevalue2'
}];

模板：

<table id="tableData" border="1" >
  <tr>
    <th>S.No.</th>
    <th>Qty</th>
    <th>Type Refrence</th>
    <th>KW Rating</th>
    <th>Frame Size</th>
    <th>Operation</th>
  </tr>
  <tr *ngFor="let row of rows">
    <td>{{row.number}}</td>
    <td>{{row.qty}}</td>
    <td>{{row.log}}</td>
    <td>{{row.kw}}</td>
    <td>{{row.frame}}</td>
    <td><button (click)="deleteFunc()">click</button></td>
  </tr>
</table>

Answer 2

您正在使用javascript来处理不必要的表。

要使用Grids在Angular中显示数据，您可以使用非常有效且易于使用的第三方网格控件。

检查这些：

NgPrime

https://www.primefaces.org/primeng/#/datatable

如何在角度2中生成表格

2 个答案: