Функция не указана в обычном объекте, на который ссылается компонент в TypeScript с угловым 2

Question

У меня есть угловой компонент и простой класс.

Простой класс имеет перечисление определенной на нем следующим образом:

export class ShieldRequest {  
    state: ShieldRequest.StateType;  

    stateAsString(): string { 
     return ShieldRequest.StateType[+this.state]; 
    } 
} 

export module ShieldRequest { 
    export enum StateType { 
     Untouched = 0, 
     Rejected = 1, 
     Accepted = 2 
    } 
} 

мне нужен мой компонент, чтобы иметь возможность ссылаться на состояние поля этого объекта. Но для этого требуется представление строки, следовательно, метод stateAsString().

моего компонент выглядит следующим образом:

import { Component, OnInit, Input } from '@angular/core'; 

import { ShieldRequest } from './shield-request'; 

@Component({ 
    moduleId: module.id, 
    selector: 'shield-request', 
    templateUrl: 'shield-request.component.html' 
}) 
export class ShieldRequestComponent implements OnInit { 
    @Input() 
    shieldRequest: ShieldRequest; 

    constructor() { } 

    ngOnInit() { } 

    get state(): string { 
     return this.shieldRequest.stateAsString(); // throws not defined... 
     // return ShieldRequest.StateType[+this.shieldRequest.state]; // works fine! 
    } 
} 

Как видно из приведенных выше комментариев, первая линия государственной собственности бросает исключение, что функция не определена, но вторая линия работает нормально. Ошибка можно увидеть ниже:

EXCEPTION: Error in http://localhost:3000/app/shield-request.component.html:8:52 caused by: this.shieldRequest.stateAsString is not a function 

Я пытался искать в Интернете, чтобы найти, почему это происходит, но я не могу показаться, чтобы найти нужную информацию. Может ли кто-нибудь объяснить мне, почему это происходит?

EDIT: Вот как ShieldRequest экземпляра объекта в эксплуатацию:

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { Observable } from 'rxjs'; 
import 'rxjs/Rx'; 

import { ShieldRequest } from './shield-request'; 

@Injectable() 
export class ShieldRequestService { 
    private apiUrl: string = 'http://localhost:24576/api/'; 
    private resourceUrlPart: string = 'request/'; 

    constructor(private http: Http) { } 

    getAllRequests(): Observable<ShieldRequest[]> { 
     return this.http.get(this.apiUrl + this.resourceUrlPart).map(response => response.json() as ShieldRequest[]); 
    } 
} 

Вот компонент, который получает и хранит запросы щит от службы:

import { Component, OnInit } from '@angular/core'; 

import { ShieldRequestService } from './shield-request.service'; 

import { ShieldRequest } from './shield-request'; 

@Component({ 
    moduleId: module.id, 
    selector: 'get', 
    templateUrl: 'get.component.html' 
}) 
export class GetComponent implements OnInit { 
    shieldRequests: ShieldRequest[]; 

    constructor(private shieldRequestService: ShieldRequestService) { } 

    ngOnInit() { 
     this.shieldRequestService.getAllRequests().subscribe(shieldRequests => this.shieldRequests = shieldRequests); 
    } 
} 

Наконец здесь вы можете увидеть, как создается компонент запроса на экран и передается вход (это файл get.component.html):

<div *ngIf="!shieldRequests" class="row"> 
    <div class="col-md-12"> 
     <div class="text-center">Loading requests...</div> 
    </div> 
</div> 
<div *ngIf="shieldRequests" class="row"> 
    <div class="col-md-12"> 
     <div *ngFor="let shieldRequest of shieldRequests" class="row"> 
      <div class="col-md-offset-2 col-md-9"> 
       <shield-request [shieldRequest]="shieldRequest"></shield-request> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

Вы SheildRequest определены как в качестве модуля, и как класс:

export class ShieldRequest 

export module ShieldRequest 

Если они находятся в том же файле, что это ваша проблема. При импорте:

import { ShieldRequest } from './shield-request'; 

, который знает, что вы импортируете. Даже если это не так, не рекомендуется называть два объекта с тем же именем.