如何在lightning web组件中连接两个变量并分配给lightning-card的标签属性

Question

我在闪电网络组件（LWC）中有一个闪电卡，想要使用两个不同的变量设置标签属性。虽然这可以通过控制器完成，但我想在 html 文件本身中完成此操作。

如代码片段中所示，我将 {cardTitle} 指定为标题，但我有另一个变量 {totalCount} 并希望将totalCount 与此处的cardTitle 连接起来。所以闪电卡应该有像“{cardTitle}{totalCount}”这样的标题。

<lightning-card title={cardTitle}></lightning-card>

//In Controler js
@track cardTitle = 'Student details';
@track totalCount = 0; //This will be set by the apex controller later and will have dynamic number

当我尝试下面的代码时

<lightning-card title={cardTitle}{totalCount}></lightning-card>

它显示错误为

发现多个表情

.

Answer 1

不。您只能在 controller JavaScript 文件中执行此操作。

我喜欢SF stackexchange 上的部分答案，所以我将在这里引用它：

您对将 UI 与控制器逻辑分离的担忧并不适用 在这里，因为这不是“控制器”。 MVC 模式是一种 Aura-ism。 这是驱动组件功能的代码，因此它 你的 JS 知道类名是有道理的。

这是不同的，但可以这样想 - 它可以让你为 JavaScript 编写适当的单元测试。如何测试仅存在于 HTML 层的逻辑？或者仅在 Visualforce 页面标记中？

您只能有一种表情。如果您阅读类似的文档 https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.reference_directives

你会看到

表达式可以是 JavaScript 标识符（例如 person）或从对象访问属性的点表示法（person.firstName）。引擎不允许计算表达式 (person2.name['John'])。要计算表达式的值，请在 JavaScript 类中使用 getter。