tiktok นับยอดวิวยังไง

Angular สามารถใช้ดึงข้อมูล API ได้โดยใช้ HttpClientModule ซึ่งเป็นโมดูลที่รวมอยู่ใน Angular อยู่แล้ว

ในการดึงข้อมูล API ด้วย Angular ให้ทำตามขั้นตอนต่อไปนี้:

1. นำเข้า HttpClientModule ลงในไฟล์ app.module.ts

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. สร้างคลาส Service เพื่อจัดการการร้องขอ API

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class MyService {

  constructor(private http: HttpClient) {}

  getProducts() {
    return this.http.get('https://example.com/api/products');
  }

}

3. เรียกใช้วิธีการ getProducts() ในคลาส Service ในคอมโพเนนต์ของคุณ

import { Component, OnInit } from '@angular/core';
import { MyService } from './my.service';

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

  products: any[] = [];

  constructor(private myService: MyService) {}

  ngOnInit() {
    this.myService.getProducts().subscribe((products) => {
      this.products = products;
    });
  }

}

4. แสดงข้อมูลที่ได้รับจาก API ในเทมเพลต HTML

<h1>Products</h1>

<ul>
  <li *ngFor="let product of products">
    {{ product.name }}
  </li>
</ul>

ตัวอย่างโค้ดข้างต้นจะดึงข้อมูลผลิตภัณฑ์ทั้งหมดจาก API และแสดงข้อมูลในรายการ

หากต้องการดึงข้อมูล API แบบมีเงื่อนไข ให้ใช้พารามิเตอร์ query ในคำขอ GET

getProducts(name: string) {
  return this.http.get('https://example.com/api/products?name=' + name);
}

ตัวอย่างโค้ดข้างต้นจะดึงข้อมูลผลิตภัณฑ์ที่ชื่อตรงกับพารามิเตอร์ name

หากต้องการดึงข้อมูล API แบบมีแบบฟอร์ม ให้ใช้พารามิเตอร์ body ในคำขอ POST

createProduct(product: { name: string, price: number }) {
  return this.http.post('https://example.com/api/products', product);
}

ตัวอย่างโค้ดข้างต้นจะสร้างผลิตภัณฑ์ใหม่ใน API

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการใช้ HttpClientModule เพื่อดึงข้อมูล API โปรดดูเอกสาร Angular HttpClient: https://angular.io/api/common/http/HttpClient