Заполнение угловой формы данными, переданными другим приложением

#angular #spring-boot

#angular #весенняя загрузка

Вопрос:

Я новичок в angular, и это мое требование, не уверен, как я могу это сделать в Angular.

Мое угловое приложение получит данные HTTP POST в виде json из другого приложения (мы не можем изменить этот метод с POST на GET)

Я должен показать предварительно заполненную форму в приложении Angular, используя данные json, полученные из разных приложений.

Я также использую springboot. Я не использую какую-либо базу данных (поэтому не могу хранить данные и вызывать службу из angular.

1. В чем именно ваш вопрос? Какой-нибудь фрагмент кода вашей проблемы? А как насчет ответа от API?

2. Более подробная информация, пожалуйста! Используете ли вы формы, управляемые шаблонами, или реактивные формы в Angular?

3. Если POST возвращает данные, вы можете использовать их так же, как и GET.

Ответ №1:

Вам нужно создать конечную точку post в вашей службе, которая каким-то образом хранит данные на сервере, а затем перенаправляет их в приложение Angular. Тогда у вас есть другая конечная точка в вашей службе, из которой приложение Angular может извлекать эти данные.

Angular — это приложение на стороне клиента и не может быть действием post.

1. Адриан, у меня нет никакой базы данных для хранения информации

2. Что находится в полезной нагрузке post? Возможно, вы сможете преобразовать его в JSON.string и передать его Angular в параметре маршрута или строке запроса.

3. Проблема в том, что URL имеет ограничение по символам

4. Тогда вам нужно решение на стороне сервера.

5. Вы указываете на использование Node.js ? Любые примеры были бы замечательными.

Ответ №2:

Я добился этого, используя сеанс весенней загрузки.Надеюсь, если это кому-то поможет.

HTML-КОД

 <form method="post" id="complainForm" action="http://localhost:8882/aalcomplaint/api/complaint/lodge-complaint" target="_blank">
  <!-- you can build your own json string as you like-->
  <input type="hidden" name="complainData" value='{"policyNumber":"1234", "firstName":"aa" , "lastName" : "mm"}' />
  <input type="submit" id="LodgeComplain" name="LodgeComplain" value="Lodge Complain"/>
</form>

КОД ВЕСЕННЕГО БОТИНКА

 @Slf4j
@CrossOrigin(origins = "*")
@RestController
@TamAuthentication
public class ComplainsController {

  @PostMapping(value = "/aalcomplaint/api/complaint/lodge-complaint")
  public ModelAndView lodgeComplaint(@RequestBody String complainData, ModelAndView modelAndView, final HttpServletRequest request) {

    final String id = UUID.randomUUID().toString();
    try {
      final ComplaintDto complaintDto = convertRequestDataToObject(complainData);
      request.getSession().setAttribute(id, complaintDto);
    }
    catch (IOException e) {
      log.error(e.getMessage());
    }
    modelAndView.setViewName("redirect:/#/lodge-complain?id="   id);
    return modelAndView;
  }

  @GetMapping(value = "/aalcomplaint/api/complaint/get-data/{id}")
  public ComplaintDto getData(@PathVariable String id, final HttpServletRequest request) {
    //TODO: id not null amp; empty check
    final ComplaintDto complaintDto = (ComplaintDto) request.getSession().getAttribute(id);
    request.getSession().removeAttribute(id);
    return complaintDto;
  }

  private ComplaintDto convertRequestDataToObject(String complainData) throws IOException {
    final ObjectMapper mapper = new ObjectMapper();
    complainData = URLDecoder.decode(complainData, "UTF-8");
    log.info("complainData > "   complainData);
    return mapper.readValue(complainData.split("=")[1], ComplaintDto.class);
  }



}

УГЛОВОЙ КОД

 export class LodgeComplainComponent {

  complainDto: ComplainDto;
  id : string;

  constructor(private activatedRoute: ActivatedRoute, private http: HttpClient, private refService: RefService) {
    this.complainDto = new ComplainDto();

  }

  ngOnInit() {
    this.activatedRoute.queryParams.subscribe(params => {
      this.id =  params['id'];
      console.log('id - '   params['id']);        
    });

    this.refService.getData(this.id).subscribe(result => {
            this.complainDto = resu<
    });
  }
}