Html 如何从角度表单中获取另一个表中映射为多对多的列的输入？

所以我尝试使用spring和angular创建单页应用程序。它有一个包含Id、姓名、电子邮件、手机号码和技能的关联表。技能被映射为包含技能Id和技能名称的多对多技能表。我能够使用JSON格式的postman执行所有CRUD操作。但是，在应用程序页面上，如果我向其中添加技能，则无法创建员工。如果我将技能保留为空白，则创建员工。下面是我客户的文件

associate.ts

  export class Associate {
  associateId: number;
  associateName: string;
  emailId: string;
  mobileNumber: string;
  skills: string[] = [];

  constructor(associateId: number, associateName: string, emailId: string, mobileNumber: string, skills: string[]) {
    this.associateId = associateId;
    this.associateName = associateName;
    this.emailId = emailId;
    this.mobileNumber = mobileNumber;
    this.skills = skills;
  }
}

export class Skill {
  skillId: number;
  skillName: string;

  constructor(skillId: number, skillName: string) {
    this.skillId = skillId;
    this.skillName = skillName;
  }
}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AssociateService {
  private baseUrl = 'http://localhost:9090/springboot-crud-rest/api/associates';

  constructor(private http: HttpClient) { }

  getAssociate(associateId: number): Observable<any> {
    return this.http.get(`${this.baseUrl}/associateId/${associateId}`);
  }

  createAssociate(associate: Object): Observable<Object> {
    return this.http.post(`${this.baseUrl}/create`, associate);
  }

  createSkill(skill: Object): Observable<Object> {
    return this.http.post(`${this.baseUrl}/skill`, skill);
  }

  updateAssociate(id: number, value: any): Observable<Object> {
    return this.http.put(`${this.baseUrl}/update/${id}`, value);
  }

  deleteAssociate(associateId: number): Observable<any> {
    return this.http.delete(`${this.baseUrl}/delete/${associateId}`, { responseType: 'text' });
  }

  getAssociatesList(): Observable<any> {
    return this.http.get(`${this.baseUrl}/get`);
  }

  getSkills(): Observable<any> {
    return this.http.get(`${this.baseUrl}/skills`);
  }

  getAssociatesByName(associateName: string): Observable<any> {
    return this.http.get(`${this.baseUrl}/associateName/${associateName}`);
  }

}

技能。ts

  export class Associate {
  associateId: number;
  associateName: string;
  emailId: string;
  mobileNumber: string;
  skills: string[] = [];

  constructor(associateId: number, associateName: string, emailId: string, mobileNumber: string, skills: string[]) {
    this.associateId = associateId;
    this.associateName = associateName;
    this.emailId = emailId;
    this.mobileNumber = mobileNumber;
    this.skills = skills;
  }
}

export class Skill {
  skillId: number;
  skillName: string;

  constructor(skillId: number, skillName: string) {
    this.skillId = skillId;
    this.skillName = skillName;
  }
}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AssociateService {
  private baseUrl = 'http://localhost:9090/springboot-crud-rest/api/associates';

  constructor(private http: HttpClient) { }

  getAssociate(associateId: number): Observable<any> {
    return this.http.get(`${this.baseUrl}/associateId/${associateId}`);
  }

  createAssociate(associate: Object): Observable<Object> {
    return this.http.post(`${this.baseUrl}/create`, associate);
  }

  createSkill(skill: Object): Observable<Object> {
    return this.http.post(`${this.baseUrl}/skill`, skill);
  }

  updateAssociate(id: number, value: any): Observable<Object> {
    return this.http.put(`${this.baseUrl}/update/${id}`, value);
  }

  deleteAssociate(associateId: number): Observable<any> {
    return this.http.delete(`${this.baseUrl}/delete/${associateId}`, { responseType: 'text' });
  }

  getAssociatesList(): Observable<any> {
    return this.http.get(`${this.baseUrl}/get`);
  }

  getSkills(): Observable<any> {
    return this.http.get(`${this.baseUrl}/skills`);
  }

  getAssociatesByName(associateName: string): Observable<any> {
    return this.http.get(`${this.baseUrl}/associateName/${associateName}`);
  }

}

associate.service.ts

  export class Associate {
  associateId: number;
  associateName: string;
  emailId: string;
  mobileNumber: string;
  skills: string[] = [];

  constructor(associateId: number, associateName: string, emailId: string, mobileNumber: string, skills: string[]) {
    this.associateId = associateId;
    this.associateName = associateName;
    this.emailId = emailId;
    this.mobileNumber = mobileNumber;
    this.skills = skills;
  }
}

export class Skill {
  skillId: number;
  skillName: string;

  constructor(skillId: number, skillName: string) {
    this.skillId = skillId;
    this.skillName = skillName;
  }
}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AssociateService {
  private baseUrl = 'http://localhost:9090/springboot-crud-rest/api/associates';

  constructor(private http: HttpClient) { }

  getAssociate(associateId: number): Observable<any> {
    return this.http.get(`${this.baseUrl}/associateId/${associateId}`);
  }

  createAssociate(associate: Object): Observable<Object> {
    return this.http.post(`${this.baseUrl}/create`, associate);
  }

  createSkill(skill: Object): Observable<Object> {
    return this.http.post(`${this.baseUrl}/skill`, skill);
  }

  updateAssociate(id: number, value: any): Observable<Object> {
    return this.http.put(`${this.baseUrl}/update/${id}`, value);
  }

  deleteAssociate(associateId: number): Observable<any> {
    return this.http.delete(`${this.baseUrl}/delete/${associateId}`, { responseType: 'text' });
  }

  getAssociatesList(): Observable<any> {
    return this.http.get(`${this.baseUrl}/get`);
  }

  getSkills(): Observable<any> {
    return this.http.get(`${this.baseUrl}/skills`);
  }

  getAssociatesByName(associateName: string): Observable<any> {
    return this.http.get(`${this.baseUrl}/associateName/${associateName}`);
  }

}

create-associate.component.html

创建关联
身份证件
名称
电子邮件Id
手机号码
技能
提交
您已成功提交！

我试图找到一个关于弹簧和角度积分的多对多或一对多的例子，但什么都找不到。我使用的是Angular版本8。我正在使用带有spring的h2数据库。我应该做哪些更改来解决此问题