Блог

Главная - Вопросы по программированию - Использование HttpClient для выполнения запросов get

Использование HttpClient для выполнения запросов get

#html #json #angular #typescript #http

Вопрос:

Я написал следующий код, чтобы получить фиктивные данные здесь:

 export class AppComponent {
    
  jsonPosts: any = [];

  constructor(private httpClient: HttpClient) { }

  OnInit() {
    this.getJsonPosts();
  }

  getJsonPosts(): any {
    return this.httpClient.get("https://jsonplaceholder.typicode.com/posts")
      .subscribe(response => {
        console.log(response);
        this.jsonPosts = response;
      });
  }

Я также написал следующий код, чтобы отобразить их в моем HTML-шаблоне:

   <ul *ngFor="let i of jsonPosts">
    <li>{{i.userId}}</li>
    <li>{{i.id}}</li>
    <li>{{i.title}}</li>
    <li>{{i.body}}</li>
  </ul>

Однако сетевая активность вообще отсутствует, и поэтому ничего не отображается…

Что я здесь делаю не так?

Комментарии:

1. Именно поэтому руководство по стилю Angular рекомендует реализовать интерфейсы жизненного цикла: angular.io/guide/styleguide#implement-lifecycle-hook-interfaces .

Ответ №1:

Вы не вызываете OnInit метод. Если вы хотите, чтобы angular lifecycle вызывал ваш метод, ваш компонент должен реализовать OnInit интерфейс с ngOnInit методом.

Подробнее здесь.

Итак, код вашего компонента должен выглядеть следующим образом:

 export class AppComponent implements OnInit {
    
  jsonPosts: any = [];

  constructor(private httpClient: HttpClient) { }

  ngOnInit(): void {
    this.getJsonPosts();
  }

  getJsonPosts(): any {
    return this.httpClient.get("https://jsonplaceholder.typicode.com/posts")
      .subscribe(response => {
        console.log(response);
        this.jsonPosts = response;
      });
  }
Метки: