ルータリンクがオブジェクトからAngular2

Question

JSONデータから「チームメンバー」ページを作成しようとしています。

私はfirstName、lastName、positionのような基本的なものでページを作成できます。

各チームのメンバーは、私が把握カント何もう少し情報

と、自分のページを持っている私の[routerLink]にチームメンバーのURLを含める方法です。

私のルータのリンクは、私は私のルート

<a [routerLink]="['./glenn']"> 

をして、セットアップを持っている。このようになります。そして、これは私が

<div class="team-members" *ngFor="let teammember of teammembers" > 
 
\t <div class="clearfix"> \t \t \t \t \t \t \t 
 
\t \t \t <div class="col-xs-12 col-sm-8 col-md-8 col-lg-6 team-member member-item" style="cursor: pointer;"> \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t <a [routerLink]="['./"{{teammember.firstName}}"']"> 
 
\t \t \t \t <div class="member-pic-holder"> 
 
\t \t \t \t \t <img alt="" src='{{teammember.photo}}' /> 
 
\t \t \t \t \t <div class="member-overlay"></div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <h4>{{teammember.firstName}}<br/>{{teammember.lastName}} <span class="fa fa-arrow-right"></span></h4> 
 
\t \t \t \t <p class="company-position">{{teammember.position}}</p> 
 
\t \t \t \t </a> 
 
\t \t \t </div> \t 
 
\t </div> 
 
</div>

どれをそれを使用しようとしてる方法ですこれについての考えはどうですか？

私は一度に一つのことしかし、チーム・メンバーの写真

<img alt="" src='{{teammember.photo}}' /> 

を含めるようにしようとしている場合にも破壊です！

GWS

Answer 1

おかげで、あなたは間違って結合{{ foo.bar }}を使用している、{{ }}構文はあなたが結合片道を行うことができます、あなたが欲しいのは、あなたのオブジェクトのプロパティにバインドする際、正規のjs表現を使用することです。

html要素の属性にバインドするとき、あなたはあなたが使用できる画像のhrefのために、あなたのケースでは、結合[attr.{id|href|etc}]を使用することができます。単に[routerLink] = "[teammember.firstName]"を使用し、

<img alt="" [attr.href] = 'teammember.photo' /> 

とルータのための（ではありません。

：あなたはあなたがそれを必要がある場合は怒鳴る示すように、あなたは、あなたのチームメンバークラスにゲッターを使用して、それを追加することができ、 ./を必要とする理由

あなたのルートのために、あなたはの線に沿って何かを行うことができますしてください

チームメンバークラス

export class TeamMember { 
    // ...properties and constructor 
    private memberUrl: string = "foobar" 

    get MemberRoute(){ 
     return `./${this.memberUrl}`; 
    } 
} 

テンプレート：

<div class="team-members" *ngFor="let teammember of teammembers" > 
    <div class="clearfix">       
     <div class="col-xs-12 col-sm-8 col-md-8 col-lg-6 team-member member-item" style="cursor: pointer;">         
      <a [routerLink]="[teammember.MemberRoute']"> 
      <div class="member-pic-holder"> 
       <img [attr.href] = 'teammember.photo' /> 
       <div class="member-overlay"></div> 
      </div> 
      <h4>{{teammember.firstName}}<br/>{{teammember.lastName}} <span class="fa fa-arrow-right"></span></h4> 
      <p class="company-position">{{teammember.position}}</p> 
      </a> 
     </div> 
    </div> 
</div> 

この情報がお役に立てば幸い！

Answer 2

あなたはこのように試すことができます：

['./',teammember.firstName] 

IMG用

<img alt="" [src]="teammember.photo" />