Как потреблять и экспортировать массив объектов внутри моего класса в Angular

Question

Я настраиваю приложение с Spring boot и Angular для изучения внешнего интерфейса. У меня есть несколько REST API, которые предоставляют мне объекты студентов и объекты классов. Как я могу правильно объявить эти объекты и массивы и как я могу опубликовать их обратно в мое весеннее приложение?

Что у меня так далеко:

Мой API на локальном хосте: 8080 / api / студентов / заполненный в бэк-энде возвращается:

[
    {
        "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[];
}

Объявляю ли я классы прямо как массив внутри Student?

Classes.ts

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

создать-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>

создать-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();
}

Я могу показать список классов в избранных, но после выбора одного и отправки я получаю

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"]
}

Однако помещение выбранных элементов в массив невозможно простым связыванием. Вам нужно будет преобразовать свойство classes из строки в массив, прежде чем вносить API в компонент.