routerLink from Object in Angular2

Question

Я пытаюсь создать страницу «Член команды» из данных JSON.

Я могу создать страницу с основными вещами, такими как firstName, lastName, position.

член

Каждая команда имеет свою собственную страницу с немного больше информации

То, что я не могу понять, как включить члены команды URL-адрес, чтобы мой [routerLink].

Мой маршрутизатор ссылка будет выглядеть следующим образом, который я имею установку в моих маршрутах

<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, вы можете использовать [attr.{id|href|etc}] связывания, в вашем случае, для HREF изображения вы можете использовать:

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

И для маршрутизатора, просто использовать [routerLink] = "[teammember.firstName]" (не уверен, почему вам нужно ./, если вы нуждаетесь в этом, вы можете добавить его с помощью поглотителя на классе членов команды, как показано ниже

Для ваших маршрутов, вы могли бы сделать что-то вдоль линий:.

Член команды класс

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" />