Obtenez de l'objet Json à partir de l'url (web api) angulaire 2 & caractères d'imprimerie

`Bonjour,
J'ai besoin d'aide pour obtenir des données JSON à partir de l'API web sur Visual Studio 2015 .net Core, Angulaire 2 & caractères d'imprimerie. Angular2 dossiers dans /wwwroot/libs.

Je suis en utilisant Angulaire 2 du protocole http.get(). Le résultat de la get() de la fonction d'affichage d'une valeur indéfinie ... Pourquoi?

Il y a mes fichiers :

Les dossiers

[API][2]

CustomersController.cs => Accès OK via 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;
    }
}

client.ts

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

client.service.ts

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);
        });
}}

client.composante.ts

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.le 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.composante.ts

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

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

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

Merci.

  • Vous pouvez voir la demande de "GET" sur votre réseau dans l'onglet développeur d'outils sur votre navigateur?? si ne pas essayer d'importer le "Http" dans ngModule et remover "HTTP_PROVIDERS"
  • Je ne vois pas la Demande dans l'onglet réseau (inspecter les éléments => réseau) ... Tout ce que je vois est la réponse de mon Http get (), qui peut atteindre l'URL mais Rien dans la valeur => pas défini, et quand j'initialise la valeur de la clientèle pour les clients: le Client[] = []; La valeur est "tableau[0]
  • Le journal instruction est en cours avant l'affectation à cette.clients. Ce qui est enregistré si vous mettez le journal de déclaration après la cession?
  • Ok maintenant j'ai mes données dans le tableau : imgur.com/a/rYYsN Mais il semble avoir un problème avec get() de la fonction
  • Il semble que votre sérialiseur sur le côté serveur de retour variables en minuscules. Soit changer le sérialiseur paramètre à utiliser des lettres majuscules ou changer votre point de vue à se lier à la baisse des propriétés du cas (le client.de nom)
  • De Ne Rien Changer. J'ai 3 objets dans le tableau. Comment puis-je faire pour afficher les 3 objets ?
  • si par "affichage", tu veux dire de modifier les propriétés de la clientèle.ts de la classe à la baisse des valeurs de cas c'est ce que j'ai fait, mais Rien de changer
  • Vous devez également modifier les propriétés dans le code html spécifié dans le modèle. Actuellement, il se lie à {{client.Id}} et {{client.Name}} en utilisant premier caractère en majuscule, cela change de tous les minuscules
  • merci u ! il fonctionne et u as raison toutes les variables de la Clientèle de la classe doit être en minuscule ... en Fait si on enlève le Client de la classe, il fonctionne très bien aussi ... Pourquoi devrions-nous mettre l'un de la sorte?
  • J'ai ajouté cela comme une réponse afin que nous puissions discuter de la solution

InformationsquelleAutor amin89 | 2016-12-09