CODEWITHSUNDEEP
angulartypescriptdevextreme
Santa Cloud
Santa Cloud

Reputation: 617

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

Upvotes: 3

Views: 830

Answers (2)

Ivan Matviienko
Ivan Matviienko

Reputation: 1

You can do it like previous, or use brackets:

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

Upvotes: 0

Charles Assuncao
Charles Assuncao

Reputation: 568

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>

Upvotes: 1

Related Questions