#angular #http-post #spring-batch
#угловой #http-сообщение #пружинная партия
Вопрос:
Я пытаюсь понять, как вызвать метод Http.post в Angular. Я пытаюсь создать форму с определенными полями ввода. Как только пользователь нажмет кнопку «Отправить» в пользовательском интерфейсе, он вызовет службы ( написанные в springboot) для вставки записей в базу данных. Хотя мои службы springboot работают нормально, но я не могу правильно вызвать их из Angular.
услуги.ts:
export class MFinService { constructor(private http: HttpClient ) { } public addRecord(networth : any){ return this.http.postlt;anygt;("http://localhost:8080/networth" , networth); } } компонент.ts :
export class NetworthHomeComponent implements OnInit { constructor(private mFinService : MFinService) { } ngOnInit(): void { } // Reactive cardForm cardForm = new FormGroup({ account : new FormControl(), ppf : new FormControl(), nps : new FormControl(), pf : new FormControl(), stocks : new FormControl(), mf : new FormControl(), online : new FormControl() }); public submitForm(){ console.log(this.cardForm.value); this.mFinService.addRecord(this.cardForm.value).subscribe( (data : any) =gt; { console.log(data); } ) } } Класс контроллера Springboot :
@PostMapping("/networth") public ResponseEntitylt;Stringgt; addNetworth(@RequestBody Networth networth){ int result = mFServices.addNetDetails(networth); if(result gt; 0){ return ResponseEntity.status(HttpStatus.OK).body("A new records has been inserted !"); } return null; } Класс DTO для пружинных ботинок :
Ошибка :
вставленные записи в базу данных :
Запрос и ответ на вкладке Сеть :
Комментарии:
1. имя отправляемого объекта в базе данных, похоже, не совпадает, у них обоих одинаковое имя
@RequestBody Networth networth? например, учетная запись в angular против учетной записи в базе данных2. Статус 200 ОК, так что ошибка, вероятно, связана с ответом, который не может быть проанализирован в JSON. Проверьте вкладку сеть и посмотрите, каков на самом деле ответ.
3. Добавлены скриншоты для того же. Происходит ли это потому, что ответ находится в строковом формате, в то время как Angular ожидает в формате json ?
Ответ №1:
Возможно, ошибка не в http-вызове, а в самой форме.
Попробуйте эти 2 вещи:
ВАЖНО: Объявите/инициализируйте каждое поле с соответствующим типом, чтобы оно соответствовало ожидаемому входному DTO для обратной стороны (чтобы соответствовать атрибутам вашего обратного интерфейса «Networth»).
- Инициализировать форму:
cardForm = new FormGroup({ account : new FormControl(''), ppf : new FormControl(''), nps : new FormControl(''), pf : new FormControl(''), stocks : new FormControl(''), mf : new FormControl(''), online : new FormControl('') }); Если это все еще не работает, попробуйте это:
- Сделайте себе форму «макета», что-то вроде:
// Use the same types that you have indicated on the back!!! interface CardForm { account : string; ppf : string; nps : string; pf : string; stocks: string; mf: string; online: string; }; constructor(private mFinService : MFinService) { } ngOnInit(): void { } cardForm: CardForm = { account : ''; ppf : ''; nps : ''; pf : ''; stocks : ''; mf: ''; online: ''; }; public submitForm(){ this.mFinService.addRecord(cardForm).subscribe( (data : any) =gt; { console.log(data); } ) } } Если этот последний способ сработает, то вы будете знать, что проблема заключалась не в вашем вызове api.
Ответ №2:
Сообщенная проблема возникла из-за того, что моя служба загрузки spring была ответом в строковом формате. Я изменил ответ, чтобы сделать его в формате JSON :
@PostMapping("/networth") public ResponseEntitylt;Stringgt; addNetworth(@RequestBody Networth networth){ int result = mFServices.addNetDetails(networth); if(result gt; 0){ return ResponseEntity.status(HttpStatus.OK).body("{"response" : "a new record has been inserted successfully !"}"); } return null; }