Angular 14: Как получить и отобразить данные из API

В этом руководстве мы узнаем, как получать/извлекать данные из API и отображать их в таблице в приложениях angular 14.

Получить данные из API и отобразить в Angular 14

Используйте следующие шаги для получения/извлечения данных из API и отображения их в таблице в приложениях angular 14:

Шаг 1 - Создайте новое приложение Angular

Прежде всего, откройте свой терминал и выполните на нем следующую команду, чтобы установить приложение angular:

ng new my-new-app

Шаг 2 - Импорт модулей

Посетите каталог src/app и откройте файл app.module.ts. Затем импортируйте в него модули; следующим образом:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
   
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
   
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Шаг 3 – Создайте HTML-код списка в файле просмотра

Создайте простой html для отображения списка с помощью сервисов API в угловых приложениях. Итак, посетите src/app/app.component.html и обновите в нем следующий код:

<h1>Angular 14 HttpClient for Sending Http Request Example</h1>
   
<ul class="list-group">
  <li
      *ngFor="let post of posts"
      class="list-group-item">
      {{ post.title }}
  </li>
</ul>

Шаг 4 - Создайте сервис для API

Откройте терминал и выполните в нем следующую команду, чтобы создать сервис для HTTP-запроса клиента; следующим образом:

ng g s services/post

Затем перейдите в каталог src/app/ и откройте post.service.ts. Добавьте следующий код в файл post.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
   
@Injectable({
  providedIn: 'root'
})
export class PostService {
  private url = 'http://jsonplaceholder.typicode.com/posts';
    
  constructor(private httpClient: HttpClient) { }
   
  getPosts(){
    return this.httpClient.get(this.url);
  }
   
}

Шаг 5 - Используйте службы API в компоненте

Посетите каталог src/app и откройте app.component.ts. Затем добавьте следующий код в файл component.ts:

import { Component, OnInit } from '@angular/core';
import { PostService } from './services/post.service';
   
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  posts:any;
   
  constructor(private service:PostService) {}
   
  ngOnInit() {
      this.service.getPosts()
        .subscribe(response => {
          this.posts = response;
        });
  }
}

Шаг 6 - Запустите приложение Angular

На этом этапе выполните следующие команды на терминале, чтобы запустить приложение angular:

ng serve

Откройте веб-браузер, введите в него указанный URL:

http://localhost:4200

Вывод

В этом руководстве мы узнали, как получать/извлекать данные из API и отображать их в таблице в приложениях angular 14.