时间戳

首页 > 解决方案 > 使用 Swagger 生成的 Angular API 客户端库通过 Angular 11 发布数据

angular - 使用 Swagger 生成的 Angular API 客户端库通过 Angular 11 发布数据

问题描述

我正在尝试在 Angular 11 中使用来自https://editor.swagger.io/的 Swagger 生成的 Angular API 客户端库。我可以调用 API 库来获取结果。但是，我不知道如何将数据从表单发布到库。非常感谢任何帮助或建议。

表单中的 JSON 数据如下所示：

{
  "id": 1,
  "requestDetail": "Gift for Lucy's birthday",
  "requestItem": [
    {
      "id": 1,
      "requestId": 1,
      "item": "Giant Poo Bear",
      "quantity": 1
    },
    {
      "id": 2,
      "requestId": 1,
      "item": "Giant Panda",
      "quantity": 1
    }
  ]
}

请求-create.component.ts

import { Component, OnInit } from '@angular/core';
import { FormArray, Validators } from '@angular/forms';
import { FormGroup, FormControl } from '@angular/forms';
import { FormBuilder } from '@angular/forms';
import {RequestCreateDto}  from '../../api/models/request-create-dto';
import {GoodsRequestService} from '../../api/services/goods-request.service';

@Component({
  selector: 'app-test',
  templateUrl: './request-create.component.html',
  styleUrls: ['./request-create.component.scss']
})


export class RequestCreateComponent implements OnInit {
  requests: RequestCreateDto[]=[] ;
  constructor(private fb: FormBuilder,private requestService: GoodsRequestService) { }
  
  RequestForm = this.fb.group({
    requestTitle: ['', Validators.required],
    requestItem: this.fb.array([
      this.newItem()
    ])
  });

  newItem(): FormGroup {
    return this.fb.group({
      item: ['', Validators.required],
      quantity: ['1',Validators.required],
    })
  }

  removeItem(i:number) {
    this.requestDetails.removeAt(i);
  }
   
  get requestDetails() {
    return this.RequestForm.get('requestItem') as FormArray;
  }
  addRequestDetails() {
    this.requestDetails.push(this.newItem());
  }

  ngOnInit(): void {
    this.getRequests();
  }
  getRequests(): void {
    this.requestService.apiGoodsRequestGet$Json().subscribe(requests => (this.requests = requests));
  }
}

商品-request.service.ts 方法 (API)

/**
   * This method provides access to the full `HttpResponse`, allowing access to response headers.
   * To access only the response body, use `apiGoodsRequestPost$Json()` instead.
   *
   * This method sends `application/*+json` and handles request body of type `application/*+json`.
   */
  apiGoodsRequestPost$Json$Response(params?: {
    body?: RequestCreateDto
  }): Observable<StrictHttpResponse<RequestReadDto>> {

    const rb = new RequestBuilder(this.rootUrl, GoodsRequestService.ApiGoodsRequestPostPath, 'post');
    if (params) {
      rb.body(params.body, 'application/*+json');
    }

    return this.http.request(rb.build({
      responseType: 'json',
      accept: 'text/json'
    })).pipe(
      filter((r: any) => r instanceof HttpResponse),
      map((r: HttpResponse<any>) => {
        return r as StrictHttpResponse<RequestReadDto>;
      })
    );
  }

标签： angularrestswagger-codegen

解决方案

结果很简单。

....

post(){
this.requestService.apiGoodsRequestPost$Json({body: this.requestForm.value}).subscribe(
  (response) => console.log(response),
  (error) => console.log(error)
)

...

推荐阅读