我在用angular开发table元素.通过我的代码,一切正常.但当我需要在td属性colspan上实现属性绑定时,它会在浏览器控制台中显示以下错误:

Uncaught Error: Template parse errors:
  Can't bind to 'colspan' since it isn't a known property of 'td'. ("Total Rows:
                    </td>
                    <td [ERROR ->]colspan="{{count}}">
                      {{rows}}
                    </td>

What I've tried is:

<table class="table table-hover" width="100%">
    <tr>
        <th *ngFor="let col of columns">
            {{col}}
        </th>
    </tr>
    <tr *ngFor="let data of getFilteredData">
        <td *ngFor="let col of columns">
            {{data[col]}}
        </td>
    </tr>
    <tr>
        <td colspan="{{count}}">
            Total Rows: {{rows}}
        </td>
    </tr>
</table>

What I want:

enter image description here

在我的.ts文件中,我为列数组的长度赋予了count个值,所以无论列的长度是多少,我的脚注单元格都使用属性绑定进行均匀分布.

我也试着:

  • [colspan]="计数"
  • colspan="‘计数’"

但所有这些都不起作用,并且显示出同样的错误.

推荐答案

试试这个,

如果要绑定到属性,请使用[attr.colspan]="count"语法

这里,colspan不是TD元素的属性.colspan是一个属性.因此,我们必须在colspan中添加前缀attr,以告知Angular 它是一个属性,如果我们不写attr前缀,则Angular 认为它是属性,所以它会抛出错误.

Angular相关问答推荐

如何在Angular应用程序部署中安全地管理环境变量

Angular:浏览器中未显示一些Google Content图标

Angular前端调用ALB身份验证后的后端并重定向

tabindex on button on button in MatMenu in angular不工作

未在ng bootstrap 模式中设置表单输入

如何在ANGLING v17中使用鞋带样式组件?

material 对话框中没有合适的注塑

如何从2个api获取数据并查看Angular material 表中的数据?

具有两个订阅方法的 Angular 16 takeUntilDestroyed 运算符

Angular JWT Token 被添加到lazyUpdate 而不是 HttpHeaders 中的标头

等待两个订阅完成而不嵌套

如何从 RxJS 重试中排除某些 url

根据变量值更改按钮样式

如何为所有模块全局声明指令?

如何在 Angular2 中的所有请求的请求标头中发送Cookie?

Angular 4 设置下拉菜单中的选定选项

Angular 2从assets文件夹加载CSS背景图像

单元测试错误:无法从同步测试中调用 Promise.then

如何作为模块的子模块路由到模块 - Angular 2 RC 5

路由 getCurrentNavigation 始终返回 null