Question

我有一个接受数据格式为[ { "record_id": "TestID3" } ]的API。我正在尝试使用下面的表单在我的角度项目中发送record_id字段：

HTML：

<input id="record_id" type="text" class="form-control" [(ngModel)]="member.record_id" name="record_id" #record_id="ngModel" placeholder="Enter Record ID">

component.ts：

export class MembersAddComponent implements OnInit {
member: Array<Object> = [];

constructor(private service: DataService ) { }

ngOnInit() {
}

submit() {
  this.service.importRecord(this.member).subscribe(member => {
    this.member = member;
  }, error => {
    console.log(error);
  });

}

}

我的服务。：

importRecord(data): Observable<any> {
    const formData = new FormData();
    formData.append('token', this.token);
    formData.append('content', this.content);
    formData.append('format', this.format);
    formData.append('returnFormat', this.returnFormat);
    formData.append('type', this.type);

    formData.append('overwriteBehavior', this.overwriteBehavior);
    formData.append('forceAutoNumber', this.forceAutoNumber);
    formData.append('data', data);
    formData.append('returnContent', this.returnContent);


    return this.http.post(this.baseUrl, formData).map(res => res.json())
        .catch(this.handleError);
}

我得到的错误如下：

{＆＃34;错误＆＃34;：＆＃34;导入的数据格式不正确。 JSON必须在数组中，如[{...}]。＆＃34;}

我也试过了member:any = {}，member:Object = {};但我得到了同样的错误。我在想我无法将member对象格式化为请求的格式。但我无法将其作为所需的格式。

Answer 1

[ { "record_id": "TestID3" } ]

这是一个包含单个元素的数组，它是一个对象。

member: Array<Object> = [];

定义一个根本没有元素的数组。

[(ngModel)]="member.record_id"

这将尝试读取和写入record_id的属性member，这是一个数组。它不会神奇地向数组添加元素并设置其属性。

所以你需要的是一个将由表单填充的对象。然后，您需要在将数组发送到API之前将该对象放入数组中。

首先定义描述对象的界面：

interface Member {
  record_id: string;
}

然后使用一个作为表单的模型：

member: Member = {
  record_id: '';
};

...

[(ngModel)]="member.record_id"

然后在发送之前将该成员放入数组中：

submit() {
  const data: Array<Member> = [this.member];
  this.service.importRecord(data)...

Answer 2

很难判断这是由于来自POST或POST正文的错误格式化响应。

你可以做的事情：

检查Chrome中的网络标签以验证是否正在发送请求，其内容是有效的JSON（使用在线验证程序）
检查您的API后端，看看您发送的数据是否正在保存，如果是，则错误与您的回复中的JSON格式有关。
在Chrome中验证网络请求中的响应数据是否有效JSON。
如果所有这些都属实，您可能需要考虑使用{requestType：'json'}等标题，详见Angular文档：Request/Response Headers
如果不是这样，那么您需要更改要发送的对象的模型以反映预期的对象。

将json对象作为json数组发送到API

2 个答案: