Question

我正在尝试进行角度绑定，我被一种奇怪的情况困住了。我需要绑定两个属性-这里的“代码”和“标题”是绑定属性

<app-title-component fxFlexFill [title]="code + title"></app-title-component>

这很好！我在屏幕上得到了简明代码的值和标题值。

现在我想在两个可绑定属性之间使用静态文本说，我希望结果是

CodeValue-CodeTitle值

该怎么做？有没有办法使用字符串插值进行绑定？

Answer 1

您可以通过以下两种方法获得所需的结果。从评论中提到的一种非常简单的方法开始。

<app-title-component fxFlexFill [title]="code + ' - ' + title"></app-title-component>

第二，您可以像这样使用字符串插值。请确保对此插值使用反勾号（`），否则将被忽略。

<app-title-component fxFlexFill [title]="result"></app-title-component>

在模板内

public get result(): string
{
    return `${this.code} - ${this.title}`;  
}

Here is an article looking at How Angular can deal with string interpolation。

Answer 2

您只需在组件中定义吸气剂，如下所示：

class FooComponent {
  title:string;
  code:string;
  get formatedTitle(){return `${this.code} - ${this.title}`;}
}

<app-title-component fxFlexFill [title]="formatedTitle"></app-title-component>

如何在Angular中绑定两个属性

2 个答案: