代码之家 › 专栏 › 技术社区 › Milan Kamilya

无法从组件调用模型类的方法。angular2中的html

angular-directive angular

Milan Kamilya · 技术社区 · 7 年前

getAvatar() 成员的方法。但是,我得到了以下错误:

[错误]错误类型错误:上下文。$implicit。getAvatar不是一个函数。(在“\u v.context.implicit.getAvatar()”中,“\u v.context.implicit。getAvatar'未定义) 错误 View\u MyChatsListComponent\u 2(MyChatsListComponent.ngfactory.js:20) (匿名函数) handleError(供应商包:66715) (匿名函数)(vendor.bundle.js:70378:111) onInvoke(供应商包:69568) (匿名函数)(vendor.bundle.js:69270) 接下来(vendor.bundle.js:23268) 下一步(vendor.bundle.js:23012) checkStable(供应商包:69533) onLeave(供应商包: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()

请建议您是否有任何其他可重用性解决方案。

2 回复 | 直到 7 年前

Poul Kruijt 7 年前

这个 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);

Prathmesh Dali 7 年前