无法从 Angular2 中的 Component.html 调用模型类的方法答案

【问题标题】：Can't call model class's method from Component.html in angular2无法从 Angular2 中的 Component.html 调用模型类的方法
【发布时间】：2017-07-12 13:36:45
【问题描述】：

我是 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) logError (vendor.bundle.js:79083) （匿名函数）处理错误（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） _next (vendor.bundle.js:23304) 下一个（vendor.bundle.js:23268）下一个（vendor.bundle.js:23012）发射（vendor.bundle.js:69256） checkStable (vendor.bundle.js:69533) onLeave (vendor.bundle.js:69609) onInvokeTask (vendor.bundle.js:69562) runTask (polyfills.bundle.js:2606) 调用（polyfills.bundle.js:2901） (匿名函数) (polyfills.bundle.js:4669)

模型类：

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()。

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

【问题讨论】：

你能展示你的组件如何访问members吗？
@FrankModica 当然，让我更新问题
您还有语法错误。 this..id 应该是 this.id
谢谢，是的，我已经纠正了。
this.members = members.map(x => Object.assign(new Member(), x));

标签： angular angular-directive

【解决方案1】：

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 中做任何事情

【讨论】：

谢谢@PierreDuc。

【解决方案2】：

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

【讨论】：