无法从 angular2 中的 Component.html 调用模型 class 的方法

Question

我是 angular js 2 的初学者。目前，

我已经定义了一个组件来显示列表成员。从模板 HTML，我想调用成员的 getAvatar() 方法。但是，我收到以下错误：

[错误] 错误 – 类型错误：_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'未定义）错误 View_MyChatsListComponent_2 (MyChatsListComponent.ngfactory.js:20) 日志错误（vendor.bundle.js:79083）（匿名函数） handleError (vendor.bundle.js:66715) 勾选 (vendor.bundle.js:70507) （匿名函数）（vendor.bundle.js:70378:111） onInvoke (vendor.bundle.js:69568) 运行 (polyfills.bundle.js:2556) 下一个 (vendor.bundle.js:70378:86) （匿名函数）（vendor.bundle.js:69270） __tryOrUnsub (vendor.bundle.js:23417) 下一个 (vendor.bundle.js:23364) _下一个（vendor.bundle.js:23304）下一个 (vendor.bundle.js:23268) 下一个 (vendor.bundle.js:23012) 发出（vendor.bundle.js:69256）检查稳定 (vendor.bundle.js:69533) onLeave (vendor.bundle.js:69609) onInvokeTask (vendor.bundle.js:69562) 运行任务 (polyfills.bundle.js:2606) 调用 (polyfills.bundle.js:2901) (匿名函数) (polyfills.bundle.js:4669)

型号Class:

import { GlobalConst } from './global';

export class Member {
  id: number;

  getAvatar(): string {
    return GlobalConst.BASE_API_URL + "/users/" + this.id + "/avatar?w=60&amp;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&amp;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()。

如果您有任何其他可重用性解决方案，请提出建议。

Answer 1

创建一项将为您提供 getAvatar() 方法的服务。在您想要访问 getAvatar() 方法的任何地方注入该服务。将 id 传递给此方法。正如您所做的那样，您已在问题的后面部分进行了解释。只将该方法移动到服务，以便它可以跨组件访问。

Answer 2

return response.json() as Member[] 不会神奇地创建成员数组。正如 yurzui 在他的评论中所说，你需要启动 Member 个实例，将你的方法更改为：

this.http.get( this.memberUrl, {headers: GlobalVar.httpHeader})
         .map(response => response.json)
         .map(x => Object.assign(new Member(), x))
         .toPromise()
         .catch(this.errorHandler);

TypeScript 中的转换只是提示编译器，它在编译后实际上并没有做任何事情JavaScript

无法从 angular2 中的 Component.html 调用模型 class 的方法

Can't call model class's method from Component.html in angular2

angular-directive

angular