Geben Sie JSON-Objekte aus dem Back-End als richtige Typoskript-Klassen mit Methoden ein

Question

Ich versuche, die JSON-Objekte aus dem Back-End zu richtigen Klassen Klassen auf der eckigen Seite zugeordnet zuordnen.

Hier ist mein Backend-Code:

findMessagesWithOtherUserAccount(otherId:Number):Observable<Message[]> { 
    return this.http.get('/api/message/find-messages-with-other-useraccount/' + otherId) 
     .map(this.extractMessages); 
} 

private extractMessages(res:Response) { 
    let body = res.json(); 
    return body || {}; 
} 

Beachten Sie die Observable von Message. Hier Message ist die Art ich brauche, weil ich Business-Logik zu der Klasse hinzugefügt haben, wie folgt:

import {UserAccount} from "../useraccount/useraccount.model"; 

export class Message { 

    constructor(id:number, 
       sender:UserAccount, 
       recipient:UserAccount, 
       sendDate:Date, 
       messageRead:boolean, 
       text:string) { 
     this.id = id; 
     this.sender = sender; 
     this.recipient = recipient; 
     this.sendDate = sendDate; 
     this.messageRead = messageRead; 
     this.text = text; 
    } 

    id:number; 
    sender:UserAccount; 
    recipient:UserAccount; 
    sendDate:Date; 
    messageRead:boolean; 
    text:string; 

    getCounterparty(user:UserAccount):UserAccount { 
     if (!this.sender) return null; 
     return (user.id !== this.sender.id) ? this.sender : this.recipient; 
    } 

    isSender(user:UserAccount):boolean { 
     return user.id === this.sender.id; 
    } 

    isRecipient(user:UserAccount):boolean { 
     return user.id === this.recipient.id; 
    } 

    isNew(user:UserAccount):boolean { 
     return !this.messageRead && this.isRecipient(user); 
    } 
} 

ich versuche, von einer Komponente auf die isRecipient Verfahren zu verweisen:

getSenderFirstName(message:Message):string { 
     if (message.isRecipient(this.currentUserAccount)) { 
      return this.otherUserAccount.firstName; 
     } 
     return 'Moi';//FIXME: i18n/translate 
    } 

Allerdings bekomme ich diese Fehler:

browser_adapter.js:81 TypeError: message.isRecipient is not a function 
    at MessageConversationComponent.getSenderFirstName (message-conversation.component.js:50) 

diese Nachricht angibt, wird nicht eingegeben (andere als ein einfaches Objekt js) ...

Hier ist die vollständige Komponente:

export class MessageConversationComponent implements OnInit { 

    messagesWithOtherUserAccount:Message[]; 
    currentUserAccount:UserAccount; 
    otherUserAccount:UserAccount; 

    constructor(private messageService:MessageService, 
       private userAccountService:UserAccountService, 
       private routeSegment:RouteSegment) { 
    } 

    ngOnInit() { 
     this.messageService.findMessagesWithOtherUserAccount(2) 
      .subscribe(param=>this.messagesWithOtherUserAccount = param); 
     this.userAccountService.retrieveOtherUserAccount(2) 
      .subscribe(param=> this.otherUserAccount = param); 
    this.userAccountService.currentUserAccount$.subscribe(param=>this.currentUserAccount = param); 
    } 

    getSenderFirstName(message:Message):string { 
     if (message.isRecipient(this.currentUserAccount)) { 
      return this.otherUserAccount.firstName; 
     } 
     return 'Moi';//FIXME: i18n/translate 
    } 
} 

und die Vorlage:

  <div *ngFor="let message of messagesWithOtherUserAccount" class="media col-xs-12"> 
       <div class="media-body Lui" ng-class="getMessageClasses(message)"> 
        <div class="media-heading"> 
         {{getSenderFirstName(message)}} <small><span am-time-ago="message.sendDate"></span></small> 
        </div> 
        <p class="message-text">{{message.text}}</p> 
       </div> 
      </div> 

Answer 1

Sie können nicht nur JSON-Instanz zu einer Klasse werfen. Wenn Sie tatsächlich eine Klasse mit Methoden benötigen, müssen Sie es schaffen, mit new SomeClass() wie:

private extractMessages(res:Response) { 
    let body = res.json(); 

    if(body) { 
     return new Message(
     body.id, 
     new UserAccount(body.sender), 
     new UserAccount(body.recipient), 
     new Date(body.sendDate), 
     body.messageRead, 
     body.text); 
    } else { 
     return new Message(
    } 
} 

Wenn Sie nur typisierten Zugriff auf die Eigenschaften wollen Sie eine Schnittstelle anstelle einer Klasse und Besetzung dieser Schnittstelle statt Auto-Vervollständigung verwenden können, erhalten und statische Typprüfung.