Observables gibt die Daten nicht zurück

Question

Ich entwickle eine Angular 2 App, die Web API Anrufe macht. Ich benutze derzeit Visual Studio 2015, MVC5 Webapi, Typoskript und Observables, um die Web-API-Aufrufe von Client-Skript zu machen. Es sieht so aus, als gäbe es ein Problem mit dem Web API Aufruf. Ich kann sehen, dass das Webapi aufgerufen wird, aber das Ergebnis wird wahrscheinlich nicht rechtzeitig zurückgegeben, wenn es benötigt wird. Bitte beachten Sie die Fehlermeldung und meinen Code unten

Fehlermeldung

Web Api Methode

[Route("api/customerorder")] 
    public class CustomerOrderController : ApiController 
    { 
     public IEnumerable<CustomerViewModel> GetCustomerOrder() 
     { 
      return new List<CustomerViewModel> 
      { 
       new CustomerViewModel { FirstName = "Jammy", LastName = "Oliver" , City = "London" , OrderCount = 12 }, 
       new CustomerViewModel { FirstName = "Sam", LastName = "Walter" , City = "Birmingham" , OrderCount = 12 }, 
       new CustomerViewModel { FirstName = "Tom", LastName = "Shanks" , City = "Liverpool" , OrderCount = 12 }, 
       new CustomerViewModel { FirstName = "Dan", LastName = "Barack" , City = "Kent" , OrderCount = 12 }, 
       new CustomerViewModel { FirstName = "Mike", LastName = "Jagger" , City = "Norwich" , OrderCount = 12 } 
      }; 
     } 
    } 

Customer.Service.ts

@Injectable() 
export class CustomerService 
{ 

    constructor(private http: Http) { } 

    private customerOrderUrl = 'http://localhost:62440/api/customerorder'; 

    getCustomerOrders(): Observable<CustomerOrder[]> { 

     return this.http.get(this.customerOrderUrl) 
      .map((res: Response) => res.json()) 
      .catch((error: any) => Observable.throw(error.json().error || 'Server Error')); 
    } 
} 

Wenn Sie den folgenden Code sehen, versuche ich Webapi über die Methode loadCustomerOrder aufzurufen, die ihrerseits den Serviceaufruf in Customer.Service.ts aufruft.

Customer.Component.ts

import { Component, OnInit ,Input,OnChanges} from '@angular/core'; 
import { CustomerOrder } from './customerOrder'; 
import { CustomerService } from './customer.service'; 
import { GridModule, GridDataResult, PageChangeEvent, SortDescriptor, orderBy } from '@progress/kendo-angular-grid'; 


@Component({ 
    moduleId: module.id, 
    selector: 'cust', 
    templateUrl: '/app/customers/customer.component.html', 
    providers: [CustomerService] 
}) 

export class CustomerComponent implements OnInit { 

    private gridView: GridDataResult; 
    private sort: SortDescriptor[] = []; 
    private data: any[]; 

    private pageSize: number = 10; 
    private skip: number = 0; 
    title = 'Customer List'; 
    customerorder: CustomerOrder[]; 


    ngOnInit(): void { 
     this.title = 'Customers'; 

    } 

    constructor(private _custService: CustomerService) 
    { 
     this.data = []; 
     this.loadCustomerOrder(); 
    } 


    loadCustomerOrder(): void { 

     this._custService.getCustomerOrders() 
      .subscribe(
      CustomerOrder => this.customerorder = CustomerOrder, 

      err => console.log(err) 

      ); 
     this.data = this.customerorder; 
     this.loadData(); 
     } 

    private loadData(): void { 
     this.gridView = { 
      data: this.handleData(), 
      total: this.data.length 
     }; 
    } 

    private handleData() { 
     var pagedData = this.data.slice(this.skip, this.skip + this.pageSize) 
     if (!this.sort) { return pagedData; } 

     var orderedAndPagedData = orderBy(pagedData, this.sort); 
     return orderedAndPagedData; 
    } 


} 

Answer 1

ändern

loadCustomerOrder(): void { 

     this._custService.getCustomerOrders() 
      .subscribe(
      CustomerOrder => this.customerorder = CustomerOrder, 

      err => console.log(err) 

      ); 
     this.data = this.customerorder; 
     this.loadData(); 
     } 

zu

loadCustomerOrder(): void { 

     this._custService.getCustomerOrders() 
      .subscribe(
      (CustomerOrder) => { 
       this.customerorder = CustomerOrder 

       this.data = this.customerorder; 
       this.loadData(); 

      }, 

      err => console.log(err) 

      ); 
     } 

seit getCustomerOrders ist ein Asynchron-Funktion Ihre this.customerorderundefined ist, wenn Sie eszuweisen.

Answer 2

Sie benötigen loadCustomerOrder Funktion wie unten und this.loadCustomerOrder(); innerhalb ngOnInit stattdessen als ngOnInit von constructor nennen sich ändern wird mehr bevorzugt über constructor:

loadCustomerOrder(): void { 
    this._custService.getCustomerOrders().subscribe(
    customerOrder => { 
     this.customerorder = customerOrder; 
     this.data = customerOrder; 
    }, err => console.log(err) 
);  
    this.loadData(); 
}