来自Object in Angular2的routerLink

我想从JSON数据构建一个“Team Member”页面。来自Object in Angular2的routerLink

我可以用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

来源

2017-01-19 Glenn Sampson

您正在使用{{ foo.bar }}结合不当，{{ }}语法允许你做结合的一种方式，你想要的是结合你的对象属性时使用正则表达式的JS。

当绑定到一个HTML元素的属性，你可以使用[attr.{id|href|etc}]结合，你的情况，对于图像的href您可以使用：

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

和路由器，只需使用[routerLink] = "[teammember.firstName]"（不知道为什么你需要的./，如果你需要它，你可以用你的团队成员类一个getter追加它，如以下所示的

为了您的路线，你可以沿着线做一些事情：

团队成员类

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>

希望这有助于！

来源

2017-01-19 05:26:31

谢谢很好的解释。我已经实现了它，但不起作用...现在我的链接你知道如何删除符号吗？ –

请忽略团队成员URL的设定不正确 –

很高兴知道！祝你好运 –

可以尝试这样的：

['./',teammember.firstName]

为IMG使用

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

来源

2017-01-19 05:45:57 ani5ha

来自Object in Angular2的routerLink

回答

相关问题