Angular 6 - Dịch vụ Http
Dịch vụ Http sẽ giúp chúng tôi tìm nạp dữ liệu bên ngoài, đăng lên nó, v.v. Chúng tôi cần nhập mô-đun http để sử dụng dịch vụ http. Chúng ta hãy xem xét một ví dụ để hiểu cách sử dụng dịch vụ http.
Để bắt đầu sử dụng dịch vụ http, chúng tôi cần nhập mô-đun vào app.module.ts như hình dưới đây -
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Nếu bạn thấy mã được đánh dấu, chúng tôi đã nhập HttpModule từ @ angle / http và mã này cũng được thêm vào mảng nhập.
Bây giờ hãy để chúng tôi sử dụng dịch vụ http trong app.component.ts.
import { Component } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private http: Http) { }
ngOnInit() {
this.http.get("http://jsonplaceholder.typicode.com/users").
map((response) ⇒ response.json()).
subscribe((data) ⇒ console.log(data))
}
}
Hãy cho chúng tôi hiểu mã được đánh dấu ở trên. Chúng ta cần nhập http để sử dụng dịch vụ, được thực hiện như sau:
import { Http } from '@angular/http';
Trong lớp AppComponent, một hàm tạo được tạo và biến riêng http kiểu Http. Để tìm nạp dữ liệu, chúng ta cần sử dụngget API có sẵn với http như sau
this.http.get();
Nó lấy url để được tìm nạp làm tham số như được hiển thị trong mã.
Chúng tôi sẽ sử dụng url thử nghiệm - https://jsonplaceholder.typicode.com/usersđể tìm nạp dữ liệu json. Hai hoạt động được thực hiện trên bản đồ dữ liệu url đã tìm nạp và đăng ký. Phương thức Bản đồ giúp chuyển đổi dữ liệu sang định dạng json. Để sử dụng bản đồ, chúng ta cần nhập giống như hình dưới đây -
import {map} from 'rxjs/operators';
Sau khi hoàn thành bản đồ, đăng ký sẽ ghi kết quả đầu ra trong bảng điều khiển như được hiển thị trong trình duyệt -
Nếu bạn thấy, các đối tượng json được hiển thị trong bảng điều khiển. Các đối tượng cũng có thể được hiển thị trong trình duyệt.
Để các đối tượng được hiển thị trong trình duyệt, hãy cập nhật mã trong app.component.html và app.component.ts như sau -
import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { map} from 'rxjs/operators';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private http: Http) { }
httpdata;
ngOnInit() {
this.http.get("http://jsonplaceholder.typicode.com/users")
.pipe(map((response) => response.json()))
.subscribe((data) => this.displaydata(data));
}
displaydata(data) {this.httpdata = data;}
}
Trong app.component.ts, bằng cách sử dụng phương thức đăng ký, chúng tôi sẽ gọi phương thức dữ liệu hiển thị và chuyển dữ liệu được tìm nạp làm tham số cho nó.
Trong phương pháp dữ liệu hiển thị, chúng tôi sẽ lưu trữ dữ liệu trong một httpdata biến. Dữ liệu được hiển thị trong trình duyệt bằng cách sử dụngfor qua biến httpdata này, được thực hiện trong app.component.html tập tin.
<ul *ngFor = "let data of httpdata">
<li>Name : {{data.name}} Address: {{data.address.city}}</li>
</ul>
Đối tượng json như sau:
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "[email protected]",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
},
"phone": "1-770-736-8031 x56442",
"website": "hildegard.org",
"company": {
"name": "Romaguera-Crona",
"catchPhrase": "Multi-layered client-server neural-net",
"bs": "harness real-time e-markets"
}
}
Đối tượng có các thuộc tính như id, tên, tên người dùng, email và địa chỉ nội bộ có đường phố, thành phố, v.v. và các chi tiết khác liên quan đến điện thoại, trang web và công ty. Sử dụngfor vòng lặp, chúng tôi sẽ hiển thị tên và chi tiết thành phố trong trình duyệt như được hiển thị trong app.component.html tập tin.
Đây là cách màn hình được hiển thị trong trình duyệt -
Bây giờ chúng ta hãy thêm tham số tìm kiếm, tham số này sẽ lọc dựa trên dữ liệu cụ thể. Chúng tôi cần tìm nạp dữ liệu dựa trên tham số tìm kiếm đã chuyển.
Sau đây là những thay đổi được thực hiện trong app.component.html và app.component.ts tập tin -
app.component.ts
import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { map} from 'rxjs/operators';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private http: Http) { }
httpdata;
name;
searchparam = 2;
ngOnInit() {
this.http.get("http://jsonplaceholder.typicode.com/users?id="+this.searchparam)
.pipe(map((response) => response.json()))
.subscribe((data) => this.displaydata(data));
}
displaydata(data) {this.httpdata = data;}
}
Cho get api, chúng tôi sẽ thêm tham số tìm kiếm id = this.searchparam. Searchparam bằng 2. Chúng tôi cần các chi tiết củaid = 2 từ tệp json.
Đây là cách trình duyệt được hiển thị -
Chúng tôi đã an ủi dữ liệu trong trình duyệt, được nhận từ http. Điều tương tự được hiển thị trong bảng điều khiển của trình duyệt. Tên từ json vớiid = 2 được hiển thị trong trình duyệt.