chungtinhlakho chungtinhlakho - 3 months ago 6
Javascript Question

Error creating a custom variable

I'm using angular2, in the *ngFor (see below), I can assign value to an attribute, in this case "id". The code below works.

<div *ngFor="#t in test" id="{{t.num}}">{{t.comment}}</div>


However, if I create a custom attribute, I can't do it, I get an error.

Can't bind to 'data-value' since it isn't a known native property


I tried a lot of different ways but can't do it, I can always assigned to a native attribute (e.g., id, class).

different way I've tried...

<div *ngFor="#t in test" customAttr="{{t.num}}">{{t.comment}}</div>
<div *ngFor="#t in test" [customAttr]="{{t.num}}">t.comment</div>
<div *ngFor="#t in test" [customAttr]="t.num">t.comment</div>


Any idea how I can achieve this?

Answer

Can you try using attribute binding syntax:

<div *ngFor="#t in test" [attr.data-value]="{{t.num}}">{{t.comment}}</div>

Check the official documentation for details:

Comments