Angular 2 App中项目之间没有逗号的数据绑定答案

【问题标题】：Data-Binding Without Having Comma Between Items in Angular 2 AppAngular 2 App中项目之间没有逗号的数据绑定
【发布时间】：2017-06-21 06:23:10
【问题描述】：

我在我的 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' 之间使用“，”，因为它会以这种方式出现在视图中。但是，如果没有逗号，我不确定如何让该信息正确显示，因为它们代表从我的 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>

我在这里错过了什么？

【问题讨论】：

应该是[title]="record.fullName"？

标签： javascript angular data-binding

【解决方案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>

【讨论】：

令我惊讶的是，您的第一个建议奏效了。那谢谢啦！我有点惊讶它的工作，因为我认为我需要通过字符串插值传递值。我不认为直接的字符串连接会起作用。但它做到了！再次感谢。

【解决方案2】：

我会推荐你使用一种方法

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

你的方法将是

 getFullName(firstName:string,lastName:string)
  {
    return firstName + lastName;
  }

LIVE DEMO

【讨论】：

【解决方案3】：

简单得多，您已经想出了答案。只需绑定到 fullName() 函数即可。

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

【讨论】：