使用angular 2和Typescript从URL(Web API)获取Json对象

敏89

嗨,我需要一些帮助来从Visual Studio 2015 .net Core,Angular 2和Typescript上的Web API获取JSON数据。/ wwwroot / libs中的Angular2文件夹。

我正在使用Angular 2的http.get()。get()函数的结果显示一个未定义的值...为什么?

有我的文件:

资料夹

[API] [2]

CustomersController.cs =>通过http:// localhost:45149 / api / customers /访问确定= = [{...},{...},{...}]

public class CustomersController : Controller
{
    // GET: api/customers 
    [HttpGet]
    public IList<Customer> Get()
    {
        var objects = new List<Customer>
        {
            new Customer { Id = 1, Log = "user01", Name = "user1" },
            new Customer { Id = 2, Log = "user02", Name = "user2" },
            new Customer { Id = 3, Log = "user03", Name = "user3" }
        };
        return objects;
    }
}

客户

export class Customer {
constructor(
    public Id: number,
    public Log: string,
    public Name: string
    ){}
}

客户服务

import { Injectable } from "@angular/core";
import { Http } from "@angular/http";
import { Observable } from "rxjs/Observable";
import { Customer } from "./customer";
import "rxjs/Rx"

@Injectable()
export class CustomerService {
private baseUrl = "http://localhost:45149/api/customers/";  // web api URL
constructor(private http: Http) { }

getCustomers() {
    return this.http.get(this.baseUrl)
        .map(res => <Customer[]> res.json())
        .catch(error => {
            console.log(error);
            return Observable.throw(error);
        });
}}

客户组件

import { Component, OnInit } from '@angular/core';
import { HTTP_PROVIDERS } from '@angular/http';
import { Customer } from './customer';
import { CustomerService } from './customer.service'

@Component({
selector: 'app-api',
template: ` 
<ul class="">
<li *ngFor="let customer of customers">
<span class=""> 
{{customer.Id}} </span> {{customer.Name}}
</li>
</ul>`,
    providers: [
            HTTP_PROVIDERS,
            CustomerService
    ] }) 

    export class CustomerComponent implements OnInit{
    api: string;
    public customers: Customer[];

    constructor(private customerService: CustomerService) {
    this.api = "API Customers"; 
}

ngOnInit() {
    this.customerService.getCustomers()
        .subscribe(
        customers =>
        {
            console.log(this.customers);
            this.customers = customers;
        },
        error => alert("error"));
}}

app.module.ts

// 
*** Imports ***
//

@NgModule({
imports: [BrowserModule, routing], //other modules the app depends on
providers: [CustomerService],
declarations: [AppComponent,
HomeComponent,UploadComponent,CustomerComponent],
bootstrap: [AppComponent] // root component to bootstarp
})

export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app/app.component.html' // => SPA
})

export class AppComponent {
title = "App-root"
}

谢谢你。

哈格纳

您似乎在尝试绑定到具有大写名称的属性时,服务器已设置为使用驼峰式序列化响应。

如果您希望将序列化程序设置更改为使用其他格式,请检查以下文章:Web API序列化属性,从小写字母开始

否则,您可以通过绑定到斜角的小写字母名称来解决问题

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用 Angular 2 从 API 获取 JSON 数据

来自分类Dev

使用 Angular 2 (TypeScript) 验证和查询 Dynamics CRM Web API

来自分类Dev

如何使用Rails从AWS S3获取对象URL(link)(API JSON Response)

来自分类Dev

使用Angular2,angularfire2和Typescript从Firebase对象中获取数据

来自分类Dev

使用POST从API获取JSON对象

来自分类Dev

使用PHP从外部URL获取Json对象

来自分类Dev

使用PHP从外部URL获取Json对象

来自分类Dev

如何使用 JSON 将对象类从 angular 2 直接映射到 web api?

来自分类Dev

如何使用 Angular 2 中的 2 个对象从 JSON webservice 获取值

来自分类Dev

如何使用 PHP JSON 对象从 Google Maps API 获取 5 个附近地点的纬度和经度?

来自分类Dev

Angular 2 Http –如何使用finance_charts_json_callback()回调从API获取JSON数据

来自分类Dev

Angular 2 使用 ngfor 获取 json 数据

来自分类Dev

使用angular2从JSON获取键和值

来自分类Dev

使用angular2从JSON获取键和值

来自分类Dev

使用Typescript获取Angular 2中的属性

来自分类Dev

使用Typescript获取Angular 2中的属性

来自分类Dev

我应该使用哪个API或库来获取JSON对象

来自分类Dev

使用API客户端获取JSON对象

来自分类Dev

无法使用 Wikipedia API 调用获取随机的 JSON 对象属性

来自分类Dev

使用vue和axios从API数据中获取每个对象

来自分类Dev

使用 R 和 rjson 库获取 json 对象

来自分类Dev

使用Angular Js从API获取Json数据

来自分类Dev

如何使用Angular js在JSON对象中获取对象

来自分类Dev

使用Angular 1.2在cookie中设置和获取对象

来自分类Dev

如何使用Javascript从2D json对象获取数据

来自分类Dev

我如何使用php_decode和url在php中获取json对象的结果

来自分类Dev

使用javascript,angular.js和sql.js,如何从url获取文件对象?

来自分类Dev

使用 angular + web api 创建和查看对象。前端结构

来自分类Dev

从 json 或 api 获取数据的 Angular 2 最佳实践

Related 相关文章

  1. 1

    使用 Angular 2 从 API 获取 JSON 数据

  2. 2

    使用 Angular 2 (TypeScript) 验证和查询 Dynamics CRM Web API

  3. 3

    如何使用Rails从AWS S3获取对象URL(link)(API JSON Response)

  4. 4

    使用Angular2,angularfire2和Typescript从Firebase对象中获取数据

  5. 5

    使用POST从API获取JSON对象

  6. 6

    使用PHP从外部URL获取Json对象

  7. 7

    使用PHP从外部URL获取Json对象

  8. 8

    如何使用 JSON 将对象类从 angular 2 直接映射到 web api?

  9. 9

    如何使用 Angular 2 中的 2 个对象从 JSON webservice 获取值

  10. 10

    如何使用 PHP JSON 对象从 Google Maps API 获取 5 个附近地点的纬度和经度?

  11. 11

    Angular 2 Http –如何使用finance_charts_json_callback()回调从API获取JSON数据

  12. 12

    Angular 2 使用 ngfor 获取 json 数据

  13. 13

    使用angular2从JSON获取键和值

  14. 14

    使用angular2从JSON获取键和值

  15. 15

    使用Typescript获取Angular 2中的属性

  16. 16

    使用Typescript获取Angular 2中的属性

  17. 17

    我应该使用哪个API或库来获取JSON对象

  18. 18

    使用API客户端获取JSON对象

  19. 19

    无法使用 Wikipedia API 调用获取随机的 JSON 对象属性

  20. 20

    使用vue和axios从API数据中获取每个对象

  21. 21

    使用 R 和 rjson 库获取 json 对象

  22. 22

    使用Angular Js从API获取Json数据

  23. 23

    如何使用Angular js在JSON对象中获取对象

  24. 24

    使用Angular 1.2在cookie中设置和获取对象

  25. 25

    如何使用Javascript从2D json对象获取数据

  26. 26

    我如何使用php_decode和url在php中获取json对象的结果

  27. 27

    使用javascript,angular.js和sql.js,如何从url获取文件对象?

  28. 28

    使用 angular + web api 创建和查看对象。前端结构

  29. 29

    从 json 或 api 获取数据的 Angular 2 最佳实践

热门标签

归档