Получить результат от http получить запрос Angular7 - PullRequest
Новая
       19

Получить результат от http получить запрос Angular7

2 голосов
/ 29 марта 2019

полностью сошел с ума.Я не совсем понимаю.Моя цель - получить ответ от моего внутреннего сервера.Вот как это работает: GET http://localhost:12345/createUser.php?name=John&age=40 возвращает мне этот json: 

{
    "id":"91",
    "name":"John",
    "age":40,
    "birthday":"null"
}

Я хотел бы отправить запрос на получение через угловую и показать ответ на странице.Мне нужен только идентификатор и имя.Итак, я создаю модель: 

export class User {
    id:string;
    name:string;
}

И пытаюсь получить ответ.Вот мои две попытки: 1. Просто введите код в app.component.ts: 

export class AppComponent implements onInit{ 
  user:User; 

  constructor(private http:HttpClient) { }

  createUser(){
    this.user = this.http.get("http://localhost:12345/createUser.php?name=test&age=20"); 
  }
}

и создайте кнопку и text-div в app.component.html, чтобы отобразить его: 

<button (click)="createUser()">Create test user!</button> 
<div ><h2>{{user.id}} {{user.name}} </h2></div>

Aaand .. здесь нет результата.Но если я закодирую html как "{{user | json}}", то я получу некоторый ответ, но это просто запрос информации, подобной этой: 

{ "_isScalar": false, "source": { "_isScalar": false, "source": { "_isScalar": false, "source": { "_isScalar": true, "value": { "url": "http://localhost:12345/createUser.php?name=John&age=40", "body": null, "reportProgress": false, "withCredentials": false, "responseType": "json", "method": "GET", "headers": { "normalizedNames": {}, "lazyUpdate": null, "headers": {} }, "params": { "updates": null, "cloneFrom": null, "encoder": {}, "map": null }, "urlWithParams": "http://localhost:12345/createUser.php?name=John&age=40" } }, "operator": { "concurrent": 1 } }, "operator": {} }, "operator": {} }
Вторая попытка - создать службу данных.Так что это мой сервис: 
export class DataService {

  apiUrl="http://localhost:12345/createUser.php?name=John&age=40";
  constructor(private http:HttpClient) { }

  public createUser()
  {
    return this.http.get<User>(this.apiUrl);
  }
}

и app.component: 

user:User;
ngOnInit()
  {
    return this.dataService.createUser().subscribe(data=>this.user=data); 
  }

Нет успеха.Но пользователь создается на моем сервере в обоих направлениях.Я вижу, что не понимаю некоторые основы, но не могу найти хорошего объяснения в Интернете.Не могли бы вы помочь мне?

1 Ответ

0 голосов
/ 29 марта 2019

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

  constructor(private httpClient: HttpClient){}
  name = 'Angular';
  data: Data;
  getData(){
    return this.httpClient.get<Data>(`https://swapi.co/api/people/1/`);
  }
  ngOnInit(){
    this.getData().subscribe((res: Data)=>{this.data = res;})
  }

export interface Data{
  name: string;
  height: string;
}

<p>
  Name : {{data.name}} <br>
  Height: {{data.height}}
</p>

Вы видите этот фрагмент кода, работающий здесь Stackblitz .Надеюсь это поможет :).Дайте мне знать, если у вас все еще есть проблемы.

...