कोणीय 2 मानचित्र डेटा विशिष्ट ऑब्जेक्ट प्रकार

Question

के रूप में मैंने Angular2 ट्यूटोरियल के आधार पर एक बहुत ही सरल ऐप बनाया है।

शुरू करने के लिए, मैं एक बहुत ही सरल "बुक" मॉडल है:

/** 
* book model 
*/ 
export class Book { 
    public data; 

    /** 
    * constructor 
    * @param id 
    * @param title 
    * @param pages 
    */ 
    constructor(
     public id, 
     public title:string, 
     public pages:Array 
    ){ 
     alert('it works'); // just a check 
    } 
} 

मेरी सेवा में, मैं इस तरह एक किताब मिलती है:

return this._http.get('getBook/1') 
     .map(function(res){ 
      return <Book> res.json(); 
     }) 

मेरे उम्मीद थी कि इस मिलेगा परिणामस्वरूप जेएसओएन डेटा और इसे "ऑब्जेक्ट" बुक ऑब्जेक्ट पर।

हालांकि, यह केवल "ऑब्जेक्ट" प्रकार के साथ एक ऑब्जेक्ट देता है।

मैं एक नया बुक अपने आप को आपत्ति है और इस तरह, निर्माता में पैरामीटर पास बना सकते हैं:

return new Book(res.id, res.title, res.pages); 

इस यह करने के लिए सबसे अच्छा तरीका है? क्या मैं कुछ भुल गया?

Answer 1

हां, टाइपस्क्रिप्ट में किसी प्रकार के ऑब्जेक्ट को कास्ट करना इस प्रकार का उदाहरण नहीं बनाता है। टाइप टाइपिंग के लिए यह टाइपस्क्रिप्ट की एक सुविधा है।

आप वास्तव में Book का एक उदाहरण आप ऐसा ही कुछ उपयोग करने की आवश्यकता चाहते हैं:

return this._http.get('getBook/1') 
    .map(function(res){ 
     var data = res.json(); 
     return new Book(data.id, data.title, data.pages); 
    }) 

अपने प्रश्न का उत्तर देने के। असल में यदि आपके पास केवल आपके प्रकार के फ़ील्ड हैं (उदाहरण के लिए इंटरफ़ेस के साथ), कास्टिंग पर्याप्त है। इसके अलावा यदि आपके पास बाद में उपयोग करने के तरीके हैं, तो इसे कास्टिंग के बजाय Book प्रकार (ऊपर देखें) का उदाहरण बनाना आवश्यक है। नहीं तो आप उन्हें इस्तेमाल करने में सक्षम नहीं होगा (वे अपने वस्तु पर अपरिभाषित किया जाएगा) ...

अधिक जानकारी के लिए इस सवाल का देखें:

• How do I cast a JSON object to a typescript class

Answer 2

मुझे लगता है कि आपको चाहिए एक अंतरफलक Book घोषित वर्ग book के बजाय:

export interface Book { 
    public id; 
    public title:string; 
    public pages:Array; 
} 

आपकी सेवा में:

//get one record 
return this._http.get('getBook/1') 
     .map(function(res){ 
      return <Book> res.json(); 
     }); 

//get multi record 
return this._http.get('getBooks') 
     .map(function(res){ 
      return <Book> res.json(); 
     }); 

Answer 3

अच्छा अभ्यास

Observable<Model> 

और फिर (कोणीय प्रलेखन https://angular.io/guide/http करने के बारे में) का उपयोग कर प्राप्त प्रतिक्रिया से डेटा का उपभोग करने के लिए है:

// आयात

import {HttpClient} from "@angular/common/http"; 

// कन्स्ट्रक्टर पैरामीटर सूची में

private http: HttpClient 

// सेवा विधि

getBook(): Observable<Book> {return this.http.get<Book>({url}, {options});}