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

Question

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

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

我希望 html 呈现类似

的内容

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

我试过上面的方法，但没有用。如果它是一个值或内部 Html 我知道如何使用它但我想要 tool-tip 或标题属性.

之类的东西

如何才能做到这一点而不必在我的模型 class 中创建另一个属性？目前，我想展示两个模型道具的 tool-tip 组合。我在这里缺少什么来得到这个？

Answer 1

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

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

或者你也可以使用数据插值

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

how to refer two or more angular model properties in the html directives like [title] = "model.prop1 - model.prop2"