Question

我是角度js的初学者2.目前，

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

[错误]错误 - TypeError：_v.context。$ implicit.getAvatar不是函数。（在＆＃39; _v.context。$ implicit.getAvatar（）＆＃39;，＆＃39; _v.context。$ implicit.getAvatar＆＃39;未定义） TypeError：_v.context。$ implicit.getAvatar不是函数。（在＆＃39; _v.context。$ implicit.getAvatar（）＆＃39;，＆＃39; _v.context。$ implicit.getAvatar＆＃39;未定义）错误 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）下一个（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()。

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

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

Answer 2

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

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

2 个答案: