Funktion wird nicht auf Normal Objekt definiert durch die Komponente in Typoskript referenzierten mit kantigen 2

Question

Ich habe eine Winkelkomponente und Normalklasse bekommt.

Die Ebene Klasse hat eine ENUM auf sie wie folgt definiert:

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 
    } 
} 

ich den Zustand Feld dieses Objekt verweisen zu können, müssen meine Komponente. Aber es benötigt die String-Darstellung, also die stateAsString() -Methode.

meine Komponente sieht wie folgt aus:

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! 
    } 
} 

Wie oben in den Kommentaren zu sehen ist, die erste Zeile des Staates Eigenschaft löst eine Ausnahme, dass die Funktion nicht definiert ist, aber die zweite Zeile funktioniert gut. Fehler kann unten gesehen werden:

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

Ich habe versucht, online zu suchen, warum dies geschieht, aber ich kann nicht die relevanten Informationen zu finden scheinen. Kann mir jemand erklären, warum das passiert?

EDIT: Hier ist, wie das ShieldRequest Objekt in einem Dienst instanziiert wird:

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[]); 
    } 
} 

Hier ist die Komponente, die die Abschirmung Anforderungen vom Service erhält und speichert:

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

schließlich hier Sie können sehen, wie der Schirm-Anforderungskomponente erstellt wird und der Eingang geleitet wird (dies ist die get.component.html-Datei):

<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

Sie haben SheildRequest sowohl definiert als Modul und als Klasse:

export class ShieldRequest 

export module ShieldRequest 

Wenn sie in der gleichen Datei, die Ihr Problem. Wenn Sie importieren:

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

wer weiß, was Sie importieren. Auch wenn das nicht der Fall ist, ist es keine gute Idee, zwei Objekte mit demselben Namen zu benennen.