angular2动态增加表格

最新推荐文章于 2023-09-08 23:44:31 发布

khh8023lyf

最新推荐文章于 2023-09-08 23:44:31 发布

阅读量2.6k

点赞数

分类专栏： angular2

本文链接：https://blog.youkuaiyun.com/khh8023lyf/article/details/80111400

版权

本文记录了初学者在Angular2中遇到的动态增加表格的问题及解决方案。通过在组件中添加代码实现表格动态生成，并展示了如何在service中定义接口与组件交互。同时讨论了动态删除表格行的方法，但指出这种方法无法与特定ID结合，仅限于页面展示的删除。最后提到了使用全局变量在不同函数间传递信息的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚开始学习angular2，网上查到的资料很少，自己又遇到了动态增加表格的问题，在此记录一下自己遇到的坑。

页面中的table代码：

 
  < 
  table 
  id= 
  "tableParam" 
  class= 
  "tableParam" 
  > 
 
 
  < 
  tr 
  class= 
  "table-title" 
  > 
 
 
  < 
  th 
  style= 
  "width: 6%" 
  >序号 
  </ 
  th 
  > 
 
 
  < 
  th 
  style= 
  "width: 25%" 
  >参数名称 
  </ 
  th 
  > 
 
 
  < 
  th 
  style= 
  "width: 18%" 
  >参数类型 
  </ 
  th 
  > 
 
 
  < 
  th 
  style= 
  "width: 11%" 
  >是否必填 
  </ 
  th 
  > 
 
 
  < 
  th 
  style= 
  "width: 30%" 
  >描述 
  </ 
  th 
  > 
 
 
  < 
  th 
  style= 
  "width: 10%" 
  >操作 
  </ 
  th 
  > 
 
 
  </ 
  tr 
  > 
 
 
  </ 
  table 
  > 
 
 
     < 
    div 
    class= 
    "add" 
    > 
   
 
    < 
    div 
    class= 
    "btn" 
    style= 
    "padding: 3px;" 
    > 
   
 
    < 
    i 
    class= 
    "glyphicon glyphicon-plus" 
    ></ 
    i 
    > 
   
 
    < 
    a ( 
    click)= 
    "add()" 
    style= 
    "color: #FFF;" 
    >增加一条 
    </ 
    a 
    > 
   
 
    </ 
    div 
    > 
   
 
    </ 
    div 
    > 
   

在对应页面的组件component里面加上：

 
   add(): 
   void { 
  
 
      var 
  trid = 
  new 
  Date(). 
  getTime(); 
 
 
  this. 
  paramsNameid = 
  trid + 
  'paramsNameid'; 
 
 
  this. 
  paramsDesid = 
  trid + 
  'paramsDesid'; 
 
 
  this. 
  paraTypeid = 
  trid + 
  'paraTypeid'; 
 
 
  this. 
  checkBoxid = 
  trid + 
  'checkBoxid'; 
 
 
  var 
  objtr = 
  document. 
  createElement( 
 

最低0.47元/天解锁文章