Question

使用Angular 5 +从ASP.NET Core 2.0 Web API中消耗数据时遇到问题。

这是我所做的步骤：

我构建了一个ASP.NET Core 2.0 WebAPI并将其部署在服务器上。我可以毫无问题地使用邮递员或招摇的数据。
然后我使用NSwagStudio为我的角度前端应用程序创建了客户端TypeScript服务类。

现在问题：我可以从前端应用程序向wep api发出请求，我也在接收JSON格式的正确数据。但是，当生成的客户端服务类中的poco对象的映射过程时，某些东西不起作用。我总是得到一个空属性的对象。

这是我的代码：

product.service.ts
export class ProductService {
  private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
  private baseUrl: string;
  protected jsonParseReviver: (key: string, value: any) => any = undefined;

  constructor() {
      this.http = <any>window;
      this.baseUrl =  "http://testweb01/FurnitureContractWebAPI";
  }

  getByProductId(productId: string): Promise<Product[]> {

      let url_ = this.baseUrl + "/api/Product/GetById?";
      if (productId === undefined)
          throw new Error("The parameter 'productId' must be defined.");
      else
          url_ += "productId=" + encodeURIComponent("" + productId) + "&"; 
      url_ = url_.replace(/[?&]$/, "");

      let options_ = <RequestInit>{
          method: "GET",
          headers: {
              "Content-Type": "application/json", 
              "Accept": "application/json"
          }
      };

      return this.http.fetch(url_, options_).then((_response: Response) => {
          return this.processGetByProductId(_response);
      });
  }

protected processGetByProductId(response: Response): Promise<Product[]> {
      const status = response.status;
      let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
      if (status === 200) {
          return response.text().then((_responseText) => {
          let result200: any = null;
          let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
          if (resultData200 && resultData200.constructor === Array) {
              result200 = [];
              for (let item of resultData200) {
                var x = Product.fromJS(item);
                //console.log(x);
                result200.push(Product.fromJS(item));
              }

          }
          //console.log(result200);
          return result200;
          });
      } else if (status !== 200 && status !== 204) {
          return response.text().then((_responseText) => {
          return throwException("An unexpected server error occurred.", status, _responseText, _headers);
          });
      }
      return Promise.resolve<Product[]>(<any>null);
  }

这里是Product-class的方法：

init(data?: any) {
    console.log(data);
      if (data) {
          this.productId = data["ProductId"];
          this.productNameDe = data["ProductNameDe"];
          this.productNameFr = data["ProductNameFr"];
          this.productNameIt = data["ProductNameIt"];
          this.supplierProductId = data["SupplierProductId"];
          this.supplierProductVarId = data["SupplierProductVarId"];
          this.supplierProductVarName = data["SupplierProductVarName"];
          this.supplierId = data["SupplierId"];
          this.supplierName = data["SupplierName"];
          this.additionalText = data["AdditionalText"];
          this.installationCost = data["InstallationCost"];
          this.deliveryCost = data["DeliveryCost"];
          this.sectionId = data["SectionId"];
          this.categorieId = data["CategorieId"];
          this.price = data["Price"];
          this.ean = data["Ean"];
          this.brand = data["Brand"];
          this.modifiedDate = data["ModifiedDate"] ? new Date(data["ModifiedDate"].toString()) : <any>undefined;
          this.categorie = data["Categorie"] ? ProductCategory.fromJS(data["Categorie"]) : <any>undefined;
          this.section = data["Section"] ? ProductSection.fromJS(data["Section"]) : <any>undefined;
      }
  }

  static fromJS(data: any): Product {
      data = typeof data === 'object' ? data : {};
      let result = new Product();
      result.init(data);
      return result;
  }

当我查看数据时，在 init（）方法中，它包含了我需要的所有值。但是当我使用 data [“ProductId”] 时，该值为null / undefined。

有人可以帮忙吗？

由于

以下是我的数据对象控制台输出的屏幕截图： enter image description here

Answer 1

现在我可以想出，我可以将数据对象直接转换为Product：

  init(data?: any) {
    var p = <Product>data;

这样可行，但我问自己，为什么生成的类有一个手动设置属性的init方法，何时可以直接转换对象？

Answer 2

NSwag配置错误，使用DefaultPropertyNameHandling：CamelCase for ASP.NET Core

或者使用新的基于asp.net核心api explorer的swagger生成器自动检测合同解析器。（实验）

Angular 5+使用来自asp.net core web api的数据

2 个答案: