用于重复的样式元素，事件触发答案

【问题标题】：Style element in for repeat, triggered on event用于重复的样式元素，事件触发
【发布时间】：2018-11-20 09:41:17
【问题描述】：

我需要在<td> 标记上设置从repeat.for 呈现的一个表格元素的样式。

<td repeat.for="field of fields" 
  class="${field.fieldKey == 'validTo' ? 'fontweigth: bold;': ''}"> 
  bold field-text here
</td>

这只是我最初尝试检查是否可以重复设置元素之一的样式（似乎不起作用）。

我的预期最终结果是，当触发事件时，validTo-field 会变为粗体。目前我没有一个好的方法，非常感谢任何帮助！

【问题讨论】：

【解决方案1】：

您正在尝试使用class 属性设置样式，您应该改用css 属性。使用 css 而不是 style 以避免 IE 和 Edge 出现问题。你还拼错了font-weight。

<td repeat.for="field of fields" 
  css="${field.fieldKey == 'validTo' ? 'font-weight: bold;' : ''}">
  bold field-text here
</td>

如果您喜欢语法，也可以使用style.bind：

<td repeat.for="field of fields" 
  style.bind="field.fieldKey == 'validTo' ? 'font-weight: bold;' : ''">
  bold field-text here
</td>

当事件发生时，在特定 HTML 元素上设置样式的好方法是

在对象上设置一个属性，并在该事件发生时切换该属性。在您的 HTML 元素上考虑类似 css="${field.bolded ? 'font-weight: bold;' : ''}" 的内容，然后在您的视图模型中设置 fields[index].bolded = true。
使用ref 属性引用HTML 元素，并直接从视图模型切换样式。你会有类似ref="fieldElements[$index]" 的东西，并在视图模型中切换：fieldElements[index].style.fontWeight = 'bold'

【讨论】：

现在可以了，但是如何根据事件从我的 TS 文件中引用它？
我已编辑答案以使用 css 属性而不是 style。 style 属性中的绑定表达式在 IE 和某些版本的 Edge 中不起作用，因为浏览器会在属性值传递给 JavaScript 代码之前从属性值中删除任何无效的 CSS。框架附带的css 属性可让您避免此问题。