我正在努力建立一个"团队成员"来自JSON数据的页面。
我可以使用firstName,lastName,position等基本内容创建页面。
每个团队成员都有自己的页面,其中包含更多信息
我无法弄清楚如何将团队成员网址包含在我的[routerLink]中。
我的路由器链接看起来像我在路线中设置的
<a [routerLink]="['./glenn']">
这就是我尝试使用它的方式
<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.firstName}}"']">
<div class="member-pic-holder">
<img alt="" src='{{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>
&#13;
对此请问有什么想法吗?
当我试图加入团队成员照片时,它也会破裂
<img alt="" src='{{teammember.photo}}' />
然而,一次只有一件事!
由于
GWS
答案 0 :(得分:1)
您正在错误地使用{{ 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>
希望这有帮助!
答案 1 :(得分:0)
['./',teammember.firstName]
用于img使用
<img alt="" [src]="teammember.photo" />