javascript - Angular 2 App 中项目之间没有逗号的数据绑定(bind)

Question

我正在我的 Angular 2 应用程序中提取一些数据，现在可以正常工作了:

            <div class="contact-container">
                <contact [id]="record._id"
                               [type]="'staff'"
                               [title]="[record.name.first, record.name.last]"></contact>
            </div>

不过，很明显，我不想在“record.name.first”和“record.name.last”之间添加“,”，因为这是它在 View 中的显示方式。但是，如果没有逗号，我不确定如何让该信息无错误地显示，因为它们代表从我的 API/数据库中提取的两个不同字段。

有没有另一种方法可以打印名字和姓氏，但中间没有字符？

我试过在我的组件中使用“getter”，就像这样:

public get fullName(): string {
    return !this.record.name.first ? null : `${this.record.name.first} ${this.record.name.last}`;
}

...但是当我尝试像这样应用它时它不起作用:

            <div class="contact-container">
                <contact [id]="record._id"
                               [type]="'staff'"
                               [title]="[record.fullName]"></contact>
            </div>

我在这里错过了什么？

Answer 1

您可以使用很好的旧字符串连接:

 <div class="contact-container">
     <contact [id]="record._id"
              [type]="'staff'"
              [title]="record.name.first + ' ' + record.name.last"></contact>
 </div>

您的 getter 可能不起作用，因为它是组件的属性，而不是 record 的属性。你试过吗:

 <div class="contact-container">
     <contact [id]="record._id"
              [type]="'staff'"
              [title]="fullName()"></contact>
 </div>