如何在Angular中使用td属性colspan进行属性绑定？

20 浏览
0 Comments

如何在Angular中使用td属性colspan进行属性绑定？

我在angular中处理表格元素。尽管我的代码运行良好，但是当我需要在

属性上实现属性绑定时，在浏览器控制台中显示以下错误：

未捕获的错误：模板解析错误：

由于'td'不是“colspan”的已知属性，因此无法绑定到“colspan”。（“总行数：

]colspan =“{{count}}”>

{{rows}}

我尝试过的是：

 

    

        
            {{col}}
        
    

    

        
            {{data [col]}}
        
    

    

        
            总行数：{{rows}}

我想要的是：

“输入图像说明”src

在我的.ts文件中，我给count值赋予列数组的长度，所以无论列的长度如何，我的页脚单元格都使用属性绑定进行均匀分布。

我还尝试过：

  • [colspan] =“count”
  • colspan ='count'

但是这些都没有起作用，仍然显示相同的错误。

0

1 答案

0 Comments

在Angular中如何使用属性绑定来绑定td元素的colspan属性？

在Angular中，如果我们要绑定到一个属性，可以使用[attr.colspan]="count"的语法。在这里，colspan不是td元素的属性，而是一个属性。所以我们必须在colspan前面添加attr前缀，告诉Angular这是一个属性，如果不写attr前缀，Angular会认为它是一个属性，所以会抛出错误。

然而，需要注意的是，绑定属性可能会导致不必要的性能开销。

另外，似乎最新版本的Angular（12.2.1）不支持使用引号绑定colspan属性，所以对我来说有效的方法是：[attr.colspan]=count。

通过以上方法，我们可以在Angular中正确地使用属性绑定来绑定td元素的colspan属性。

0