Получить строковое значение из бэкэнда в Angular 8

Question

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

SearchRepository.java

    @Query("SELECT u.country FROM Users u WHERE u.email = :email")
        String findCountryByEmail(@Param("email") String email);

Controller.java

@Autowired                                                                                  
    private SearchRepository user;

    @GetMapping("/country/{email}")
    public String getCountry(@PathVariable("email") String email) {
        return user.findCountryByEmail(email);
    }

Этот API возвращает страну в виде строки. Я хочу показать эту страну на своем угловом интерфейсе. Для выполнения этой задачи я создал следующие коды в угловом формате.

 DataService.ts  
 getCountry(email: string) {
        return this.http.get<string>(`${API_URL}/country/${email}`);
      }
profile.ts
getCountry(myEmail: string) {
   this.service.getCountry(myEmail)
        .subscribe(
          data => this.country = data
        );
  }

Я использовал вышеуказанный метод getcountry внутри ngOninit, чтобы инициализировать страну пользователя при загрузке профиля. Но поле страны осталось пустым, и когда я проверил консоль, я получил следующую ошибку:

core.js:6014 ERROR 
HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost:8080/country/bean@gmail.com", ok: false, …}
error:
error: SyntaxError: Unexpected token E in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttpRequest.onLoad (http://localhost:4200/vendor.js:34481:51) at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:3626:31) at Object.onInvokeTask (http://localhost:4200/vendor.js:97626:33) at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:3625:60) at Zone.runTask (http://localhost:4200/polyfills.js:3403:47) at ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:3700:34) at invokeTask (http://localhost:4200/polyfills.js:4838:14) at XMLHttpRequest.globalZoneAwareCallback (http://localhost:4200/polyfills.js:4875:21)
text: "England"
__proto__: Object
headers: HttpHeaders
lazyInit: () => {…}
lazyUpdate: null
normalizedNames: Map(0) {}
__proto__: Object
message: "Http failure during parsing for http://localhost:8080/country/bean@gmail.com"
name: "HttpErrorResponse"
ok: false
status: 200
statusText: "OK"
url: "http://localhost:8080/country/bean@gmail.com"
__proto__: HttpResponseBase

Бэкэнд-API работает отлично, и ошибка находится во внешнем интерфейсе. Я хочу получить только значение страны из бэкэнда в виде строки. Может кто-нибудь указать мне, что не так с моим подходом? следует.

@Autowired                                                                                  
    private SearchRepository user;

    @GetMapping("/country/{email}")
    public ResponseEntity<String> getCountry(@PathVariable("email") String email) {
        return ResponseEntity.ok(user.findCountryByEmail(email));
    }

Но ошибка остается той же. Как я понимаю ошибка, вызванная из-за синтаксической ошибки ответа JSON. Но я не мог понять это. Кто-нибудь может указать мне на это?

Answer 1

Вы возвращаете строку и угловые попытки, чтобы проанализировать ее как JSON. Оберните ваш ответ в

 ResponseEntity<String> 

в серверной части или , установите правильный responseType в http-вызове angular

responseType: 'text'

(вам, возможно, потребуется использовать responseType: 'text' как 'json', не уверен, что это все еще так в v8).

return this.http.get<string>(`${API_URL}/country/${email}`, {responseType: ‘text’});

Answer 2

Попробуйте изменить тип возвращаемого значения:

ResponseEntity<String>

и добавьте тип ответа внешнего интерфейса Наблюдаемый:

getCountry(email: string): Observable<string> {
...
}