Не удается вызвать метод класса модели из Component.html в angular2

Я новичок в angular js 2. В настоящее время

Я определил компонент для отображения членов списка. Из шаблона HTML я хочу вызвать метод getAvatar() члена. Но я получил следующую ошибку:

[Ошибка] ОШИБКА — TypeError: _v.context.$implicit.getAvatar не является функцией. (В '_v.context.$implicit.getAvatar()' '_v.context.$implicit.getAvatar' не определено) TypeError: _v.context.$implicit.getAvatar не является функцией. (В '_v.context.$implicit.getAvatar()', '_v.context.$implicit.getAvatar' не определено) error View_MyChatsListComponent_2 (MyChatsListComponent.ngfactory.js:20) logError (vendor.bundle.js:79083) ( анонимная функция) handleError (vendor.bundle.js:66715) tick (vendor.bundle.js:70507) (анонимная функция) (vendor.bundle.js:70378:111) onInvoke (vendor.bundle.js:69568) run ( polyfills.bundle.js:2556) следующий (vendor.bundle.js:70378:86) (анонимная функция) (vendor.bundle.js:69270) __tryOrUnsub (vendor.bundle.js:23417) следующий (vendor.bundle.js :23364) _next (vendor.bundle.js:23304) next (vendor.bundle.js:23268) next (vendor.bundle.js:23012) emit (vendor.bundle.js:69256) checkStable (vendor.bundle.js :69533) onLeave (vendor.bundle.js:69609) onInvokeTask (vendor.bundle.js:69562) runTask (polyfills.bundle.js:2606) invoke (polyfills.bundle.js:2901) (анонимная функция) (polyfills. пакет.js:4669)

Класс модели:

import { GlobalConst } from './global';

export class Member {
  id: number;

  getAvatar(): string {
    return GlobalConst.BASE_API_URL + "/users/" + this.id + "/avatar?w=60&h=60";
  }
}

Компонент

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { Member } from './member';
import { MemberService } from './member.service';
import { GlobalConst, GlobalVar } from './global';

@Component({
    selector: 'my-members-list',
    templateUrl: './my-members-list.component.html',
  styleUrls: [ './my-members-list.component.css' ]
})

export class MyMembersListComponent implements OnInit {

  title = 'Chat API';
  members: Member[];

  constructor(
    private memberService: MemberService,
    private router: Router
  ){};

  ngOnInit(): void {
    this.memberService.getMembers()
        .then( members => {
            this.members = members;
        });
  }

  getAvatar(member: Member): string {
    return GlobalConst.BASE_API_URL + "/users/" + member.id + "/avatar?w=60&h=60";
  }
}

Сервис для участников

import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';


import 'rxjs/add/operator/toPromise';

import { Member } from './member';
import { GlobalConst, GlobalVar } from './global';


@Injectable()

    export class ChannelService {

        private memberUrl: string = "<it is a private url>"

        constructor(private http: Http, localStorage: LocalStorageService) {};  

        getMembers(): Promise<Member[]> {
            return this.http.get( this.memberUrl, {headers: GlobalVar.httpHeader})
                   .toPromise()
                   .then( response => {
                    return response.json() as Member[];
                   })
                   .catch( this.errorHandler );
    }
}

Шаблон:

<li class="mix active" style="display: block;" *ngFor="let member of members">
  <div class="media">

    <div class="media-left">
        <span>
          <img src="{{member.getAvatar()}}" class="avatar">
        </span>
        <span class="status offline"></span>
    </div>

  </div>
</li>

Если написать метод getAvatar() в компоненте и передать элемент в качестве параметра, то он работает гладко. Но в последнем случае я должен написать это getAvatar() во всех компонентах, где я хочу отображать изображение члена.

Пожалуйста, предложите, если у вас есть другое решение для повторного использования.