如何连接两个变量并分配给闪电网络组件中闪电卡的标签属性

Posted 2023-05-08

【中文标题】如何连接两个变量并分配给闪电网络组件中闪电卡的标签属性

【英文标题】：How to concatenate two variables and assign to the label attributes of lightning-card in lightning web component

【发布时间】：2019-12-22 17:31:45

【问题描述】：

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

在代码 sn-p 中，我将 cardTitle 指定为标题，但我有另一个变量 totalCount 并希望在此处将 totalCount 与 cardTitle 连接起来。所以闪电卡的标题应该像“cardTitletotalCount”。

<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=cardTitletotalCount></lightning-card>

错误显示为

找到多个表达式

.

【参考方案1】：

没有。您只能在 controller javascript 文件中执行此操作。

我喜欢part of the answer on SF stackexchange，所以我要在这里引用它：

您对将 UI 与控制器逻辑分离的担忧不适用 在这里，因为这不是“控制器”。 MVC 模式是一种光环主义。 这是驱动组件功能的代码，因此它 让你的 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。