無法從角度2中的Component.html中調用模型類的方法

我是角度js 2中的初學者。目前，我已經定義了一個組件來顯示列表成員。從模板HTML中，我想調用一個成員的getAvatar()方法。但是，我得到以下錯誤：無法從角度2中的Component.html中調用模型類的方法

[錯誤]錯誤 - TypeError：_v.context。$ implicit.getAvatar不是函數。（In'_v.context。$ implicit.getAvatar（）'，'_v.context。$ implicit.getAvatar'is undefined） TypeError：_v.context。$ implicit.getAvatar不是函數。（In'_v.context。$ implicit.getAvatar（）'，'_v.context。$ implicit.getAvatar'is undefined） error View_MyChatsListComponent_2（MyChatsListComponent.ngfactory.js：20） logError（vendor.bundle.js： 79083）（匿名功能）的HandleError（vendor.bundle.js：66715）蜱（vendor.bundle.js：70507）（匿名功能）（vendor.bundle.js：70378：111） onInvoke（供應商。 bundle.js：69568） run（polyfills.bundle.js：2556） next（vendor.bundle.js：70378：86）（anonymous function）（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）調用（polyfills.bundle.js：2901）（匿名功能）（polyfills.bundle.js：4669）

模型類：

import { GlobalConst } from './global'; 

export class Member { 
    id: number; 

    getAvatar(): string { 
    return GlobalConst.BASE_API_URL + "https://stackoverflow.com/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 + "https://stackoverflow.com/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()方法並傳遞membe r作爲參數，那麼它工作順利。但是，在後一種情況下，我必須在要顯示成員圖像的所有組件中編寫此getAvatar()。

請建議您是否有任何其他解決方案的可重用性。

來源

2017-07-12 Milan Kamilya

做任何事你能展示你的組件如何訪問'members'？ –

@FrankModica當然，讓我更新問題 –

你也有一個語法錯誤。 '這個ID'應該是'this.id' –

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

在打字稿鑄造只是提示編譯器，它實際上並沒有在編譯的JavaScript

來源

2017-07-12 14:19:25 PierreDuc

謝謝@PierreDuc。 –

創建一個服務，它將爲您提供getAvatar（）方法。在要訪問getAvatar（）方法的任何地方注入該服務。將id傳遞給此方法。正如你在問題後面的部分中所解釋的那樣。只能將該方法移動到服務中，以便可通過組件訪問它。

來源

2017-07-12 14:16:25

無法從角度2中的Component.html中調用模型類的方法

回答

相關問題