本文將介紹如何在Angular 7中使用Ajax調用。Ajax是一種基于JavaScript的技術，可以通過無需刷新整個頁面的方式執行異步HTTP請求。而Angular 7是一款流行的JavaScript框架，它提供了豐富的功能和工具，方便我們構建現代化的Web應用程序。

使用Ajax調用的一個常見場景是從服務器獲取數據并在前端頁面上顯示。讓我們以一個簡單的例子開始說明。

假設我們正在開發一個電子商務網站，并且需要從服務器獲取產品列表。這時，我們可以使用Ajax來執行HTTP GET請求，以獲取服務器上的產品數據。

// 在Angular中使用Ajax調用
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ProductService {
private apiUrl = 'https://example.com/api/products';
constructor(private http: HttpClient) { }
getAllProducts(): Observable{
return this.http.get(this.apiUrl);
}
}

在上面的代碼中，我們首先導入了`HttpClient`和`Observable`類，它們是Angular提供的用于執行Ajax調用和處理異步響應的關鍵類。然后，我們創建了一個名為`ProductService`的服務，其中包含了一個名為`getAllProducts`的方法。該方法使用`HttpClient`的`get`方法來執行GET請求，并返回一個可觀察對象（`Observable`），它將在獲取到響應后發出數據。

現在，我們可以在組件中注入`ProductService`，并調用`getAllProducts`方法來獲取產品列表。下面是一個使用`ProductService`的組件的示例：

// 在組件中調用ProductService
import { Component, OnInit } from '@angular/core';
import { ProductService } from './product.service';
@Component({
selector: 'app-product-list',
template: `
產品列表
{{ product.name }}
`
})
export class ProductListComponent implements OnInit {
products: any[];
constructor(private productService: ProductService) { }
ngOnInit() {
this.productService.getAllProducts().subscribe(
(response) =>{
this.products = response;
},
(error) =>{
console.log(error);
}
);
}
}

在上面的代碼中，我們首先通過`ngOnInit`生命周期鉤子函數訂閱了`getAllProducts`方法的可觀察對象。一旦從服務器獲取到產品數據，我們就會在回調函數中將其賦值給組件的`products`屬性。然后，我們可以在組件的模板中使用`{{ product.name }}`來展示產品的名稱。

總之，Ajax是一種非常有用的技術，它可以幫助我們在不刷新整個頁面的情況下，從服務器獲取數據并在前端頁面上展示。Angular 7為我們提供了方便的工具和API來執行Ajax調用，并處理異步響應。希望本文對你理解如何在Angular 7中使用Ajax調用有所幫助！