C# Angular2-从WebAPI映射数据时出错（错误：尝试区分时出错）

我一直在尝试从API获取数据，并使用

ngFor

将其显示在列表中。我尝试过承诺、可观察和使用map、subscribe、async管道，但还没有成功。我确信API已经被命中，但出于某种原因，它要么显示空白数据，要么抛出不同的错误。我最近得到的是

尝试区分'[{“id”：1，“名称”：“自行车1”}，{“id”：2，“名称”：“自行车”时出错 2“}，{“id”：3，“name”：“Bike 3”}]' 在DefaultIterableDiffer.diff

我有一种预感，该函数没有返回ngFor所期望的数组

以下是我的添加bike.component.ts

import { Component, OnInit } from '@angular/core';
import { Bike } from "./Entity/bike";
import { BikeService } from "./bike.service";
@Component({
    selector: 'add-bike',
    template : `<p>Hello</p><ul>
            <li *ngFor="let bike of bikes">
                {{ bike.name}}
            </li>            
        </ul>`
})

export class AddBikeComponent implements OnInit {

    bikes: Bike[] = [];
    errorMessage: string;
    constructor(private bikeService: BikeService) {

    }

    ngOnInit(): void {
        this.bikeService.getRequest().subscribe(res => this.bikes = res);
    }
}

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

import { Bike } from './Entity/bike';

@Injectable()
export class BikeService {
    private _url = 'api/bikes'; 
    constructor(private http: Http) { }
    getRequest() {
        return this.http.get(this._url).map(res => res.json());
    }

}

export class Bike {
    id: number;
    name: string;
}

bike.ts

import { Component, OnInit } from '@angular/core';
import { Bike } from "./Entity/bike";
import { BikeService } from "./bike.service";
@Component({
    selector: 'add-bike',
    template : `<p>Hello</p><ul>
            <li *ngFor="let bike of bikes">
                {{ bike.name}}
            </li>            
        </ul>`
})

export class AddBikeComponent implements OnInit {

    bikes: Bike[] = [];
    errorMessage: string;
    constructor(private bikeService: BikeService) {

    }

    ngOnInit(): void {
        this.bikeService.getRequest().subscribe(res => this.bikes = res);
    }
}

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

import { Bike } from './Entity/bike';

@Injectable()
export class BikeService {
    private _url = 'api/bikes'; 
    constructor(private http: Http) { }
    getRequest() {
        return this.http.get(this._url).map(res => res.json());
    }

}

export class Bike {
    id: number;
    name: string;
}

C语言中的Web API代码：

public class Bike
    {
        public int id { get; set; }
        public string name { get; set; }
    }

public IHttpActionResult Get()
        {
            List<Bike> list = new List<Bike>();
            list.Add(new Bike() { id = 1, name = "Bike 1" });
            list.Add(new Bike() { id = 2, name = "Bike 2" });
            list.Add(new Bike() { id = 3, name = "Bike 3" });
            return Ok(JsonConvert.SerializeObject(list));
        }

---

您从响应中得到的是当前需要解析为JSON的格式，您可以通过添加第二个映射来完成：

getRequest() {
    return this.http.get(this._url)
      .map(res => res.json())
      .map(res => JSON.parse(res))
}

---

演示：

您从响应中得到的是当前需要解析为JSON的格式，您可以通过添加第二个映射来完成：

getRequest() {
    return this.http.get(this._url)
      .map(res => res.json())
      .map(res => JSON.parse(res))
}

演示：

bike.service.ts

getRequest() {
        return this.http.get(this._url).map(res => res.json() as  Bike[]);
    }

确保自行车实体

export class Bike {
    id: number;
    name: string;
}

自行车服务

getRequest() {
        return this.http.get(this._url).map(res => res.json() as  Bike[]);
    }

确保自行车实体

export class Bike {
    id: number;
    name: string;
}

---

如果WebApi返回类类型，则不必使用

JsonConvert.SerializeObject

我没有将此方法与您的其他代码一起尝试，但是将您的返回方法更改为此方法可能会奏效

return Ok(list);

---

如果WebApi返回类类型，则不必使用

JsonConvert.SerializeObject

我没有将此方法与您的其他代码一起尝试，但是将您的返回方法更改为此方法可能会奏效

return Ok(list);

---

你能发布

Bike

的类型脚本定义吗？你能尝试显示

bikes

而不是

*ngFor

吗？只要

{{bikes}}

让我们知道显示了什么。可能尝试

{{bikes | json}

too您是否尝试使用

接口

而不是

类

。通常，我们对“模型对象”使用

interfaces

。@Amit{{{bikes}}没有显示任何内容。在添加json.parse（）后，它起了作用@Amitc您可以发布

Bike

的类型脚本定义吗？您可以尝试显示

bikes

而不是

*ngFor

来显示它吗？只要

{{bikes}}

让我们知道显示了什么。可能尝试

{{bikes | json}

too您是否尝试使用

接口

而不是

类

。通常，我们对“模型对象”使用

interfaces

。@Amit{{{bikes}}没有显示任何内容。在添加json.parse（）后，它起了作用@AmitThank有很多。我有预感我需要分析它。但我无法确定将json.parse（）放在何处。另外，您可以添加我需要做哪些更改来避免json解析吗？不幸的是，我不熟悉C语言，但请尝试@coni2k建议的方法。根本的问题是如何从后端发送数据。您需要将它作为JSON字符串发送，而不使用斜杠，如

[{“someprop”：“propValue”，…}]

，然后您就不需要解析它了。非常感谢。我有预感我需要分析它。但我无法确定将json.parse（）放在何处。另外，您可以添加我需要做哪些更改来避免json解析吗？不幸的是，我不熟悉C语言，但请尝试@coni2k建议的方法。根本的问题是如何从后端发送数据。您需要将其作为JSON字符串发送，而不使用斜杠，如

[{“someprop”：“propValue”，…}]

，然后您就不需要解析它了。您完全正确。不知怎么的，我忽略了这一点。你完全正确。我不知怎么忽略了这一点。