Question

我基于Angular2教程创建了一个非常简单的应用程序。

首先，我有一个非常简单的＆＃34; Book＆＃34;模型：

 /**
 * 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();
        })

我的期望是，这将得到生成的JSON数据和＆＃34; map＆＃34;它是Book对象。

但是，它只返回一个类型为＆＃34; Object＆＃34;。

的对象

我可以自己创建一个新的Book对象并在构造函数中传递参数，如下所示：

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

这是最好的方法吗？我错过了什么吗？

Answer 1

是的，将对象强制转换为TypeScript中的类型并不会创建此类型的实例。它只是TypeScript的一种工具，用于类型检查。

如果你想要Book的实例，你需要使用类似的东西：

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

回答您的问题。实际上，如果你只有你的类型的字段（例如有一个接口），那么施放就足够了。此外，如果您想要稍后使用方法，则必须隐式创建Book类型的实例（参见上文）而不是强制转换。否则你将无法使用它们（它们将在你的对象上未定义）......

有关详细信息，请参阅此问题：

Embarcadero's help page

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

良好做法是使用

从GET响应中使用数据

Observable<Model>

（关于Angular文档https://angular.io/guide/http）然后：

//进口

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

//在构造函数参数列表中

private http: HttpClient

//服务方法

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

Answer 4

来自https://angular.io/guide/http#requesting-a-typed-response

要指定响应对象类型，请首先使用所需的属性。使用接口而不是类，因为响应是一个普通对象，无法自动转换到一个类的实例。

总是使用接口来接收响应，因为只有发生的事情是映射字段，并且如果您具有实例功能，则在使用该对象时会抛出错误。您不能使用类。

product.getPrice is not a function

示例

interface ProductInterface {
  id: number;
  name: string;
  price: number;
}

class Product implements ProductInterface {
  id: number;
  name: string;
  price: number;
  
  constructor(productData: ProductInterface) {
    this.id = product.id;
    this.name = product.name;
    this.price = product.price;
  }
  
  public getPrice(): string {
    return this.price + " INR";
  }
}

class ProducService {
  ...
  ...


  getProduct(): Observable<Product> {
    return this.http.get<Product>('assets/product.json').pipe(map(data => new Product(data))); 
  }

  getProductWithoutMappingToClass(): Observable<Product> {
    return this.http.get<Product>('assets/product.json');
  } // Throw runtimerror ctx_r1.product.getPrice is not a function
}

angular2将数据作为特定对象类型

4 个答案: