Search code examples
angulartypescriptdevextreme

Interpolating tags attribute values in a ngFor always gets "Got interpolation ({{}}) where expression was expected" error

I'm using a Devextreme's Datatable and I wanted to dynamically configure the table via a columns configuration array.

The idea was to iterate this array with an ngFor and set column tags properties dynamically.

The question is: how can we interpolate/inject/dinamically set the value of HTML attributes inside an ngFor?

Here's what I tried so far…

1) Tried with a simple string interpolation:

<dxi-column *ngFor="let col of columns" caption="{{col.caption}}" [visible]="{{col.show}}"></dxi-column>

But I got the following error:

Got interpolation ({{}}) where expression was expected

2) Tried with [attr.XXXX]={{}} and string interpolation so I got:

<dxi-column *ngFor="let col of columns" [attr.caption]="{{col.caption}}" [attr.visible]="{{col.show}}"></dxi-column>

But I got always the following error:

Got interpolation ({{}}) where expression was expected

3) Tried with a desperate, wrong and awful try…

<dxi-column *ngFor="let col of columns" [attr.caption]=col.caption [attr.visible]=col.show></dxi-column>

But nothing, still not working (this try was not likely to work but was a quite desperate one).

Just for general knowledge, here's also my test configuration array, if interested:

  id: TableCol = {datafield:"id", show:"true" };
  desc: TableCol = {datafield:"idNodo", show:"showdesc"};

  columns: TableCol[] = [this.id, this.desc]

PS: I will be available for any clarification, if needed

Solution

  • You should remove it when you are using the input syntax, so remove from visible

    <dxi-column *ngFor="let col of columns" caption="{{col.caption}}" [visible]="col.show"></dxi-column>

    or

    <dxi-column *ngFor="let col of columns" caption="{{col.caption}}" visible="{{col.show}}"></dxi-column>