проблемы с angular для вызова ввода API через параметры - PullRequest
Новая
       5

проблемы с angular для вызова ввода API через параметры

0 голосов
/ 18 февраля 2020

Я пытаюсь получить данные с сервера API, используя angular 9, пропуская идентификатор во входных данных, чтобы получить значение телефона из JSON в API. в этом монтировании, которое не работает со мной :(, я не знаю, в чем проблема, даже я использую тот же формат в JSON API. как этот

this.phone = this.results .address.phone Пожалуйста, мне нужен кто-то, кто поможет мне за правильный ответ.

спасибо:)

Я живу простой своей работой!

Это мой app.component.ts 

import { Component } from '@angular/core';
import { HttpClient } from  '@angular/common/http';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
  constructor(private _http: HttpClient){}
url='https://jsonplaceholder.typicode.com/users/1';
id='';
phone='';
results : any;
getsearcha(){
  this._http.get('https://jsonplaceholder.typicode.com/users/'+this.id)
  .subscribe(

    data => {
      this.results = data['results'];
      this.phone = this.results.address.phone
     console.log(this._http.get(this.url));
    })
}
}

, а также мой app.component. html

<h1> test app</h1>
<input type="text" [(ngModel)]=id>

<button (click)="getsearcha()">Click</button>
<hr>
phone{{phone}}

https://stackblitz.com/edit/angular-dryp3b

Ответы [ 4 ]

2 голосов
/ 18 февраля 2020

Ваш API возвращает только data.data ['result'] неверно. 

 { "id": 2,"name": "Ervin Howell","username": "Antonette","email":"Shanna@melissa.tv","address": {
"street": "Victor Plains",
"suite": "Suite 879",
"city": "Wisokyburgh",
"zipcode": "90566-7771",
"geo": {
  "lat": "-43.9509",
  "lng": "-34.4618"
}},"phone": "010-692-6593 x09125","website": "anastasia.net","company": {"name": "Deckow-Crist","catchPhrase": "Proactive didactic contingency","bs": "synergize scalable supply-chains"}}
1 голос
/ 18 февраля 2020

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

Я проверил API jsonplacerholde.typicode.com и понял, что служба пользователей не получает числовое значение c. Служба пользователей возвращает 10 пользователей, поэтому я удалил идентификатор из HTTP-запроса.

app.component.ts 

getsearcha(){
  // this service doesn't receive a numeric value
  this._http.get('https://jsonplaceholder.typicode.com/users)
  .subscribe(
    (data: any) => {
      // data is an array of users, so I get the first element with [0]
      this.results = data;
      this.phone = this.results[0].phone
    })
}

app.component. html

<h1>
 test app
</h1>
<input type="text" [(ngModel)]="id">

<button (click)="getsearcha()">Click</button>
<hr>
phone {{phone}}
0 голосов
/ 18 февраля 2020

В соответствии с jsonplacerholde.typicode.com/users/ оформленияумыid}}, он не возвращает вам никакого массива, это простой объект, поэтому измените функцию подписки ниже одной 

getsearcha(){
  this._http.get('https://jsonplaceholder.typicode.com/users/'+this.id)
  .subscribe((userData:any) => {
      this.phone = userData.phone;
    });
}

Хорошо на go

0 голосов
/ 18 февраля 2020

Прежде всего, после того, как вы нажмете API, весь ваш ответ поступит в самих «данных», поэтому нет необходимости делать следующее: 

  this.results = data['results'];

Вместо этого: 

  this.results = data;
  this.phone = this.results[(id-1)].phone // did (id-1) because indexing is 
  from 0 and for id=2 you'll have appropriate result on index (2-1 i.e 1 and so on).

За исключением того, что все хорошо с вашим кодом.

Ура!

...