如何将嵌套的 JSON 输入数据发送到 Angular 中的 API 11

Question

我需要将嵌套的 JSON 数据发送到我的 API。这是我第一次这样做，我不知道如何在 Angular 中做到这一点。这是我需要发送的嵌套 JSON 数据

JSON

{
  "message": "string",
  "data": {
    "startDate": "2022-01-01",
    "endDate": "2022-01-04",
    "tableName": "ms_product_aud",
    "columnName": "height",
    "remarks": "100"
  }
}

请帮帮我:)

Answer 1

我终于知道该怎么做了。这就是我的做法。首先我制作数据模型

数据模型

export class ActivityLogDataSend {
    startDate: string = "";
    endDate: string = "";
    tableName: string = "";
    columnName: string = "";
    remarks: string = "";
}

然后我制作 FormGroup 和 FormControl 来输入数据

代码

this.activityLogForm = this.formBuilder.group({
      startDate: new FormControl({
        value: this.data.startDate ? "" : this.data.startDate,
        disabled: this.mode === EditMode.view || this.mode === EditMode.edit
      }, [Validators.required]),
      endDate: new FormControl({
        value: this.data.endDate ? "" : this.data.endDate,
        disabled: this.mode === EditMode.view || this.mode === EditMode.edit
      }, [Validators.required]),
      tableName: new FormControl({
        value: this.data.tableName ? "" : this.data.tableName,
        disabled: this.mode === EditMode.view || this.mode === EditMode.edit
      }, [Validators.required]),
      columnName: new FormControl({
        value: this.data.columnName ? "" : this.data.columnName,
        disabled: this.mode === EditMode.view || this.mode === EditMode.edit
      }, [Validators.required]),
      remarks: new FormControl({
        value: this.data.remarks ? "" : this.data.remarks,
        disabled: this.mode === EditMode.view || this.mode === EditMode.edit
      }, [Validators.required]),
    });

之后，我只是使用 Angular material 制作了一些简单的按钮，并创建了 class 来调用 API 并获取数据。

致电API

getData(event): void {
    const sb = this.activityLogSvc.getData(this.activityLogForm.getRawValue()).subscribe((result) => {
      this.displayedData = result;
      console.log(JSON.parse(result.syncData), 'JINX');
    });
    this.subscriptions.push(sb);
  }

这就是使用 Angular 11.

向 API 插入数据的方法

如何将嵌套的 JSON 输入数据发送到 Angular 中的 API 11

How to send nested JSON input data to API in Angular 11

json

nested-json

JSON

数据模型

代码

致电API