The error you’re hitting happens because colspan is an HTML attribute, not a native DOM property of the <td> element. Angular’s property binding syntax ([property]) looks for a corresponding property on the DOM element, which doesn’t exist here. Here’s how to fix it:

Correct Approach 1: Use Attribute Binding #

Angular has a dedicated syntax for binding to HTML attributes—prefix the attribute name with attr.. This tells Angular to set the attribute directly instead of searching for a DOM property.

Replace your problematic line with:

<td [attr.colspan]="count"> {{rows}} </td>

Note that we don’t use interpolation ({{}}) inside the attribute binding brackets—just pass the variable name directly, as Angular evaluates the expression inside the brackets automatically.

Correct Approach 2: Use Interpolation Directly #

You can also skip property binding entirely and use interpolation directly on the colspan attribute:

<td colspan="{{count}}"> {{rows}} </td>

This works because interpolation inserts the value of count into the colspan attribute when the template renders.

Why Your Original Code Failed #

Your line <td [colspan]="{{count}}"> mixed two binding syntaxes incorrectly. The [colspan] expects an Angular expression, but wrapping count in {{}} converts it to a string. This confuses Angular, as it tries to bind to a non-existent colspan property instead of setting the actual HTML attribute.

Here’s how your full table snippet might look with the fixed code:

<table class="table table-hover" width="100%">
  <tr>
    <th *ngFor="let col of columns">{{col.name}}</th>
  </tr>
  <tr>
    <td [attr.colspan]="count">{{rows}}</td>
  </tr>
</table>

内容的提问来源于stack exchange，提问作者Ahmer Ali Ahsan