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

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 材料制作了一些简单的按钮，并创建类来调用 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 插入数据的方法。