Question

我正在使用Spring Boot和Angular设置一个应用程序以研究前端。我有一些REST API，可为我提供学生对象和类对象。如何正确声明这些对象和数组，以及如何将它们重新发布到spring应用程序中？

到目前为止我所拥有的：

我在后端填充的本地主机上的API：8080 / api / students /正在返回：

[
    {
        "id": 8,
        "name": "john",
        "classes": [
            {
                "id": 1,
                "name": "math"
            },
            {
                "id": 2,
                "name": "english"
            }
        ]
    },
    {
        "id": 9,
        "name": "paul",
        "classes": [
            {
                "id": 1,
                "name": "math"
            },
            {
                "id": 3,
                "name": "science"
            }
        ]

    }
]

我在后端填充的本地主机上的API：8080 / api / classes /正在返回：

[
    {
        "id": 1,
        "name": "math"
    },
    {
        "id": 2,
        "name": "english"
    },
    {
        "id": 3,
        "name": "science"
    }
]

这是我的前端

Student.ts

import { Classes} from "./classes";

export class Student{
    id: number;
    name: string;
    classes: Classes[];
}

我是否将类声明为学生内部的数组？

Classes.ts

export class Classes{
    id: number;
    name: string;
}

create-form.component.html

<h3>Create Student</h3>
<div [hidden]="submitted" style="width: 400px;">
  <form (ngSubmit)="onSubmit()">
    <div class="form-group">
      <label for="name">Name</label>
      <input type="text" class="form-control" id="name" required [(ngModel)]="student.name" name="name">
    </div>    
    <div class="form-group">
      <label for="classes">Classes</label>
      <select class="form-control" id="classes" name="classes" required [(ngModel)]="student.classes">
        <option *ngFor="let class of classes | async"> {{ class.name }}</option>
      </select>
    </div> 
    <button type="submit" class="btn btn-success">Submit</button>
  </form>
</div>

create-form.component.ts

student: Student= new Student();
classes: Observable<Classes[]>;
submitted = false;
constructor(private studentService: StudentService) { }
ngOnInit() {
    this.classes= this.studentService.getClassesList();
}
onSubmit() {
    this.submitted = true;
    this.save();
}
save() {
    this.studentService.createStudent(this.student)
      .subscribe(data => console.log(data), error => console.log(error));
    this.student= new Student();
}

我可以在select中显示班级列表，但是在选择并提交后我得到了

HttpErrorResponse {headers: HttpHeaders, status: 400, statusText: "OK", url: "http://localhost:8080/api/students/create", ok: false, …}
error:
error: "Bad Request"
message: "JSON parse error: Cannot deserialize instance of `java.util.ArrayList` out of VALUE_STRING token; nested exception is com.fasterxml.jackson.databind.exc.MismatchedInputException: Cannot deserialize instance of `java.util.ArrayList` out of VALUE_STRING token ...
path: "/api/students/create"
status: 400

有人可以帮我解释我在做什么错吗？此外，还有其他选择可以选择表单中的多个类吗？目前我只能选择一个！

将答案更新为@ ashish.gd 这是我在类中不添加ngmodel绑定时发布的“网络”标签的预览

{id: 8, name: "johnny", classes: null"}
id: 8
classes: null
name: "johnny"

这是我的网络标签的标题

Request URL: http://localhost:8080/api/students/create
Request Method: POST
Status Code: 200 
Remote Address: [::1]:8080
Referrer Policy: no-referrer-when-downgrade
Access-Control-Allow-Origin: http://localhost:4200
Content-Type: application/json;charset=UTF-8
Transfer-Encoding: chunked
Vary: Origin, Access-Control-Request-Method, Access-Control-Request-Headers
Provisional headers are shown
Accept: application/json, text/plain, */*
Content-Type: application/json
Origin: http://localhost:4200
Referer: http://localhost:4200/add

Answer 1

select html元素将所选值绑定到student.classes上，该{基本上是一个简单的字符串。因此，将使用类作为字符串来创建您的请求对象。例如：

{
    id: 8,
    name: "johnny",
    classes: "science"
}

API端点希望classes属性是列表或数组。

因此JSON parse error: Cannot deserialize instance of java.util.ArrayList out of VALUE_STRING token;

更改请求对象以将classes属性作为数组传递应该可以解决您的错误。示例：

{
    id: 8,
    name: "johnny",
    classes: ["science"]
}

但是，通过简单的绑定无法将选定的项目推入数组。在组件中制作api之前，您需要将classes属性从字符串转换为数组。

如何在Angular类中使用和导出对象数组

1 个答案: