1

重复for循环中使用的数组

let loopArr = ["item.name + ' /'+ item.DisplayName? item.DisplayName: item.otherDisplayName", 
                    "item.description + ' /'+ item.anotherDescription"]

模板

<div repeat.for = item of data">
    <div repeat.for = "row of loopArr">
        <span textcontent.bind="renderRow(row, item)></span>
    </div>
</div>

组件方法

renderRow(row, item){
    return eval(row)
}

实际上我想在模板中显示如下

<div repeat.for = item of data">
    <div repeat.for = "row of loopArr">
        <span>${item.name + ' /'+ item.DisplayName? item.DisplayName: item.otherDisplayName} </span>
        <span>${item.description + ' /'+ item.anotherDescription} </span>
    </div>
</div>

由于我想循环通过动态 loopArr，而不是使用 eval 从字符串转换为值，有没有更好的方法来计算字符串的值？此外， eval 不适用于多行语句，是否有任何其他方法/方式来处理上述问题？

如何将字符串转换为值并在 aurelia 模板中显示？

任何帮助，将不胜感激！

4

1 回答 1

1

我不确定您为什么要以字符串格式添加逻辑并使用eval. 您可以直接将其添加到template并显示它：

<div repeat.for="item of data">
  <span>${item.name + '/' + (item.DisplayName ? item.DisplayName: item.otherDisplayName)}</span>
  <span>${item.description + ' / '+ item.anotherDescription} </span>
</div>

假设您有一个自定义字符串格式列表，并且您正在从另一个文件中导入它们。您可以创建一个函数数组而不是字符串数组。这比运行延迟字符串创建要好得多eval

displayTemplates = [
 item => item.name + '/' + (item.DisplayName ? item.DisplayName: item.otherDisplayName),
 item => item.description + '/'+ item.anotherDescription
]

然后在template：

<div repeat.for="item of data">
  <template repeat.for="func of displayTemplates">
      <span>${ func(item) }</span> <!-- call each func on item object -->
    </template>
</div>

此外，您的字符串格式存在逻辑错误。与三元运算符相比，+运算符具有更高的优先级。

所以，

item.name + '/' + item.DisplayName ? item.DisplayName : item.otherDisplayName

实际上被评估为

(item.name + '/' + item.DisplayName) ? item.DisplayName : item.otherDisplayName

因此，此表达式将始终计算为item.DisplayName因为item.name + '/' + item.DisplayName永远不会是falsy。

您需要()在三元运算周围添加：

item.name + '/' + (item.DisplayName ? item.DisplayName: item.otherDisplayName)
// OR
item.name + '/' + (item.DisplayName ?? item.otherDisplayName)
于 2020-09-05T08:37:17.620 回答