Question

我的组件中有这两个对象：

声明：声明
displayableColumns：ColumnSettings [];

displayableColumns 包含我想在HTML页面上显示的实际列。

claim.component.html：

<div *ngFor="let column for displayableColumns">
    <div class="formGroup">
        <label>{{ column.ColumnName }}</label>
        <input type="text" value="{{ claim.[column.ColumnName] }}" />
    </div>
</div>

显然 {{claim。[column.ColumnName]}} 语法不存在。

有没有办法使用字符串调用元素的属性？

由于

Answer 1

不确定您的数据究竟是什么样的，但是，您想要的实际上是可能的（如果我理解正确的话）。您的代码中存在一个小问题，语法为

 {{ claim[column.ColumnName] }}

所以删除附加内容。（点）索赔后。

Answer 2

括号之间的值可以是任何表达式。因此，如果属性名称存储在变量中，则必须使用括号表示法，如下所示

<div *ngFor="let column for displayableColumns">
    <div class="formGroup">
        <label>{{ column.ColumnName }}</label>
        <input type="text" value="{{ claim[column.ColumnName] }}" />
    </div>
</div>

其中column.ColumnName必须是您的一个声明属性。

在html中动态调用angular 2元素属性

2 个答案: