无法绑定到“数据链接”，因为它不是“td”的已知属性

Question

Actually I was doing angular migration from angularjs to angular 10. While doing the upgrade we are facing an issue with this data-link binding. keep getting the error

Can't bind to 'data-link' since it isn't a known property of 'td'

Actually they were building a grid(table structure) in the UI, It's row click will navigate to some other page, the whole row will act as a hyperlink and they were passing the clicked cell information to the next page.

Following is the angularjs code which we needs to convert to angular 10.

<tr ng-repeat="data in vm.responseData" ng-click="vm.goToSummary(data,this)">
    <td data-link="{{data.Description}}">
        <span ng-bind="data.Description" 
              data-link="{{data.Description}}">
        </span>
    </td>
    <td data-link="{{data.Description + 'propA'}}">
        <div data-link="{{data.Description + 'propA'}}" >{{data.propA}}</div>
        <span data-link="{{data.Description + 'propA_' + 'Priority'}}">{{data.propACount}}</span>
    </td>
    <td data-link="{{data.Description + 'propB'}}">
        <div data-link="{{data.Description + 'propB'}}" >{{data.propB}}</div>
        <span data-link="{{data.Description + 'propB_' + 'Priority'}}">{{data.propBCount}}</span>
    </td>
 </tr>

Can someone help me to identify how to use data-link binding in angular, or how to resolve this error. will also be helpful if someone can tell what's the role of data-link link in the above code.

Answer 1

In my case I was migrating a code from jQuery so the original:

data-sentence="mydata"

changes to:

data-sentence="{{oracion.oracion}}"

As it works, for specific data attribute you should bracket the attribute and add attr.

But the following does't work:

[attr.data-sentence]="{{oracion.oracion}}"

So you need to convert it to:

[attr.data-sentence]="oracion.oracion"

But in consideration I think is better rethink the functional system of this in consideration the attribute could not be useful since you can keep the data in the angular controller (component)