如何在 HTML 指令中引用两个或多个角度模型属性，例如 [title] = "model.prop1 - model.prop2"

Question

>假设我的组件带有一个带有用户名、昵称、名字、姓氏的模型类用户。

export class User
{
Username: string;
Nickname: string;
Firstname: string;
Lastname: string;
Email: string;
}

我希望 html 呈现类似的东西，

<div [title]="user.Username - user.Nickname">
...
</div>

我尝试了上述方法，但它不起作用。如果它是一个值或内部 Html，我知道如何使用它，但我想要类似工具提示或标题属性的东西。

如何在不必在模型类中创建另一个属性的情况下执行此操作？目前，我想展示一个组合两个模型道具的工具提示。我在这里错过了什么来得到这个？

Answer 1

您可以添加括号和字符串连接。尝试以下操作

<div [title]="(user.Username) + '-' + (user.Nickname)">
...
</div>

或者，您也可以使用数据插值

<div title="{{user.Username}}-{{user.Nickname}}">
...
</div>