Question

我正在开发一个Angular 2应用程序，它可以进行web api调用。我目前正在使用visual studio 2015，MVC5 webapi，typescript和Observables来从客户端脚本进行web api调用。看起来web api调用存在一些问题。我可以看到正在调用webapi，但结果可能不会在需要时及时返回。请参阅错误消息和我的代码

错误消息

Web Api方法

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

因此，如果你看到下面的代码，我试图通过loadCustomerOrder方法调用webapi，而loadCustomerOrder方法又调用Customer.Service.ts中的服务调用。

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

更改

   loadCustomerOrder(): void {

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

            err => console.log(err)

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

到

   loadCustomerOrder(): void {

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

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

            },

            err => console.log(err)

            );
        }

由于getCustomerOrders是异步功能，因此当您将this.customerorder分配给undefined时，this.data为data_frame <- read.csv("filename", colClasses=c("NUMBER" = "character"))。

Answer 2

您需要将loadCustomerOrder功能更改为如下所示，并在this.loadCustomerOrder();内拨打ngOnInit而不是constructor，因为ngOnInit比constructor更受欢迎}}：

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

Observables不返回数据

2 个答案: