routerLink from Object in Angular2

You are using the {{ foo.bar }} binding incorrectly, the {{ }} syntax allows you to do one way binding, what you want is to use regular js expressions when binding to your objects properties.

When binding to an html element attribute, you can use the [attr.{id|href|etc}] binding, in your case, for the href of the image you can use:

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

And for the router, simply use [routerLink] = "[teammember.firstName]" (not sure why you need the ./, if you do need it, you could append it using a getter on your team member class, as shown bellow.

For your routes, you could do something along the lines of:

Team Member Class

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

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

Template:

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

Hope this helps!