私は私の角度2アプリでいくつかのデータに引っ張っています、そして今この作品角度2 Appでアイテム

Question

の間にコンマがなくても、データは、バインディング"record.name.first"と "record.name.last"の間に "、"があるので、それはビューに表示される方法です。しかし、コンマがなければ、API /データベースから2つの異なるフィールドが引き出されているため、エラーなしで表示する方法を知りません。

姓と名字の両方を印刷する別の方法はありますか？

私はこのように、私のコンポーネントで「ゲッター」を使用して試してみた：

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

あなたは古き良き文字列の連結を使用することができます。それはないrecordの、コンポーネントのプロパティだから

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

あなたのゲッターはおそらく動作しません。あなたは試してみました：

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

Answer 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

Answer 3

はるかに簡単、多くのようになります方法を使用することをお勧めいたしますでしょうあなたはすでに答えを思いついた。 fullName（）関数にバインドするだけです。

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