在 ngFor 中插值标签属性值总是得到“得到插值（{{}}），其中表达式是预期的”错误答案

【问题标题】：Interpolating tags attribute values in a ngFor always gets "Got interpolation ({{}}) where expression was expected" error在 ngFor 中插值标签属性值总是得到“得到插值（{{}}），其中表达式是预期的”错误
【发布时间】：2018-07-26 16:02:07
【问题描述】：

我正在使用Devextreme's Datatable，我想通过列配置数组动态配置表。

想法是用ngFor 迭代这个数组并动态设置列标签属性。

问题是：我们如何在ngFor 中插入/注入/动态设置 HTML 属性的值？

这是我目前尝试过的……

1) 尝试使用简单的字符串插值：

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

但我收到以下错误：

在预期表达式的位置得到插值 ({{}})

2) 尝试使用[attr.XXXX]={{}} 和字符串插值，所以我得到了：

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

但我总是收到以下错误：

在预期表达式的位置得到插值 ({{}})

3) 绝望、错误和糟糕的尝试……

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

但是什么都没有，仍然没有工作（这个尝试不太可能成功，但非常绝望）。

只是为了一般知识，如果有兴趣，这也是我的测试配置数组：

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

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

PS：如有需要，我将提供任何澄清

【问题讨论】：

你有没有试过这样的东西：[caption]="col.caption"？（我还没有测试，我现在不能测试，所以我可能是错的）
@Deadpool 试过了！非常感谢！

标签： angular typescript devextreme

【解决方案1】：

您应该在使用输入语法时将其删除，因此请从可见中删除

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

或

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

【讨论】：

【解决方案2】：

你可以像以前那样做，或者使用括号：

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

【讨论】：

请解释你的答案
devextreme前端产品，可以在他们的官网->Demos查看示例
例如，对于 dx-data-grid，您可以设置不同的设置，例如 dxi-column 等元素，如标题、可见、宽度等。如果您将其中一些选项写在括号中（例如：[可见]），您可以在没有 {{}} 的情况下从组件中设置值。像这样：[可见] =“myVariable”。 Devextreme 库自行插入您的变量。