如何从 api 获取对象并将其映射到角度模型？答案

【问题标题】：How to get object from api and map it to angular model?如何从 api 获取对象并将其映射到角度模型？
【发布时间】：2018-06-28 23:29:22
【问题描述】：

我想从我的 api 中获取模型。

为此我使用方法：

    [HttpGet]
    public MyModel GetModel()
    {
        MyModel model = new MyModel() { ... };

        return model;
    }

如何获得角度模型结果以及如何将MyModel 映射到我的角度模型？

我有以下几点：

getModel() {
    var url = '/MyController/GetModel/';
    this.http.get(url)
        .map((data: Response) => {
            return data.json() as MyModel;
        })
        .toPromise().then(x => {
            this.myModel = x;
        })
}

我在我的组件的ngOnInit 中调用它。

但我收到一个错误：

Uncaught (in promise): SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data

我的角度请求有什么问题？

【问题讨论】：

请检查您的回复是否为有效的 json - jsonlint。
您使用的是哪个版本的 Angular？如果它是 4.3+ 并且您使用的是 HttpClient，那么您在代码示例中使用的是旧方法。
这是 Angular 5，我正在使用 Http @Sergey
这个链接应该能帮到你stackoverflow.com/questions/22875636/…
@Avinash 根据我上面的代码，我返回的是对象而不是 json。我更改了返回 json 的方法，例如。 public JsonResult GetModel() { MyModel myModel = new MyModel() {..}; var result = JsonConvert.SerializeObject(myModel); return Json(result, JsonRequestBehavior.AllowGet); } 但现在 Angular 请求甚至没有触发

标签： angular asp.net-web-api angular5

【解决方案1】：

http.get 采用泛型所以你可以这样做。

  getModel() {
        var url = '/MyController/GetModel/';
        this.http.get<MyModel>(url).toPromise().then(x => {
                this.myModel = x;
        });
    }

除非您的角度模型与 api 中的模型不同

【讨论】：

如果我的角度模型和api模型不一样怎么办？ @Obed
由于错误，我什至无法构建它：<MyModel> 说：'Expected 0 arguments, but got 1' 和 x =>：'Parameter 'x' implicitly has an 'any' type'。 @Obed
检查这个链接，nehalist.io/working-with-models-in-angular 一个很酷的方式来绕过它。你从哪里导入你的 http 对象？
感谢@Obed，您的建议帮助我编写了正确的代码。

【解决方案2】：

我是这样工作的：

getModel() {
    var url = '/MyController/GetModel/';
    return this.http.get(url)
        .map((data: Response) => {
            return data.json();
        }).toPromise().then(x => {
            this.myModel = new MyModel(x);
        })
}

MyModel 必须有一个接受json 字符串的构造函数。

【讨论】：