Выполнение HTTP-запросов в Angular 8

Question

Я делаю http запрос в угловых. но значения не будут отображаться на веб-странице а также я использую образец бесплатный API - https://reqres.in/api но это не будет отображать никаких значений.

вот мой компонент.тс

 @Component({
      selector: 'app-value',
      templateUrl: './value.component.html',
      styleUrls: ['./value.component.css']
    })
    export class ValueComponent implements OnInit {

      values: any;
      constructor(private http: HttpClient) { }

      ngOnInit() {
        this.getValues();
      }

      getValues() {
      return this.http.get<any>('https://reqres.in/api/users/2').subscribe(response => {this.values = response.any; });

      }

    }

а вот component.html

 <ul>
    <li *ngFor="let value of values">
      {{ value.text }}
    </li>
  </ul>

Answer 1

this.values = response.any неверно, потому что ваш ответ является объектом, обладающим свойством data, а не any.

Также на этой конечной точке вы получаете одного пользователя, а не набор пользователей, поэтомувам следует переименовать переменную в value, а не values.

 @Component({
      selector: 'app-value',
      templateUrl: './value.component.html',
      styleUrls: ['./value.component.css']
    })
    export class ValueComponent implements OnInit {

      value: any;
      constructor(private http: HttpClient) { }

      ngOnInit() {
        this.getValue();
      }

      getValue() {
      return this.http.get<any>('https://reqres.in/api/users/2').subscribe(response => {this.value = response.data; });

      }

    }

В HTML вы можете использовать json async pipe, чтобы представить ваши данные как json

<div> {{ value | json}} </div>

Answer 2

Если вы получаете одну запись, не используйте ngFor.

Измените response.any на response.data, потому что api возвращает в JSON 'data' как ключ, а не 'any', тогда в шаблоне добавьте, например:

<ul>
    <li>
      {{ values.email}}
    </li>
  </ul>

ngДля использования, когда API возвращает данные в виде массива объектов. Очень хорошим решением является использование Postman для проверки того, что возвращает API данных, чтобы узнать, как выглядит структура JSON.