Góc http nhận html
|
Show Bài viết này đã được đăng tại freetuts. net , không được sao chép dưới mọi hình thức. Các bước sử dụng Http ServiceĐể sử dụng dịch vụ http, trước tiên ta cần thực hiện 2 bước Bước 1. Nhập import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
results;
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get("http://jsonplaceholder.typicode.com/users").subscribe(data => {
console.log(data);
this.results = data;
});
}
}2 vào mô-đunBước 2. Khai báo và sử dụng import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
results;
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get("http://jsonplaceholder.typicode.com/users").subscribe(data => {
console.log(data);
this.results = data;
});
}
}3 trong thành phầnBài viết này đã được đăng tại [free tuts. bọc lưới] Ví dụ sử dụng dịch vụ httpTrong ví dụ này, chúng tôi sẽ lấy dữ liệu từ trang - dữ liệu mô phỏng trang để chúng tôi kiểm tra, sau đó đăng nhập vào bảng điều khiển và hiển thị lên giao diện Nhập dịch vụ httpứng dụng. mô-đun. ts import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router'
// Import http module
import {HttpClientModule} from '@angular/common/http';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { FormsModule } from '@angular/forms';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
declarations: [
AppComponent,
NewCmpComponent,
ChangeTextDirective,
SqrtPipe
],
imports: [
BrowserModule,
FormsModule,
// Khai báo http module
HttpClientModule,
RouterModule.forRoot([
{
path: 'new-cmp',
component: NewCmpComponent
}
])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Sử dụng dịch vụ http trong thành phần ứng dụngEdit content of file app. thành phần. ts as after ứng dụng. thành phần. ts import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
results;
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get("http://jsonplaceholder.typicode.com/users").subscribe(data => {
console.log(data);
this.results = data;
});
}
}Phương thức import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
results;
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get("http://jsonplaceholder.typicode.com/users").subscribe(data => {
console.log(data);
this.results = data;
});
}
}4 tạo ra 1 get request to address. Khi dữ liệu được trả về, ta thực hiện xử lý dữ liệu thông qua phương thức import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
results;
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get("http://jsonplaceholder.typicode.com/users").subscribe(data => {
console.log(data);
this.results = data;
});
}
}0get and handle data this.http.get("http://jsonplaceholder.typicode.com/users").subscribe(data => {
console.log(data);
this.results = data;
});Khi thực hiện xong yêu cầu thì phương thức import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
results;
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get("http://jsonplaceholder.typicode.com/users").subscribe(data => {
console.log(data);
this.results = data;
});
}
}0 chịu trách nhiệm xử lý tiếp. Tại đây, import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
results;
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get("http://jsonplaceholder.typicode.com/users").subscribe(data => {
console.log(data);
this.results = data;
});
}
}0 sẽ ghi dữ liệu ra bảng điều khiển như hình bên dưới Show data ra viewĐể hiển thị dữ liệu ra chế độ xem, hãy thực hiện 2 bước
Ở phần trên, dữ liệu trả về của import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
results;
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get("http://jsonplaceholder.typicode.com/users").subscribe(data => {
console.log(data);
this.results = data;
});
}
}3 đã được lưu vào biến import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
results;
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get("http://jsonplaceholder.typicode.com/users").subscribe(data => {
console.log(data);
this.results = data;
});
}
}4. Nhiệm vụ của chúng ta time is display data it raCùng nhìn vào dữ liệu của một bản ghi Dữ liệu có id, tên, email, điện thoại, tên người dùng, trang web và địa chỉ. Địa chỉ lại có các thuộc tính city, street, suite. Chúng ta sẽ hiển thị dữ liệu này dưới dạng bảng nhé Edit nội dung file app. thành phần. html ứng dụng. thành phần. html ________số 8Ta sử dụng kỹ thuật liên kết dữ liệu kỹ thuật đã học trong bài trước để liên kết dữ liệu từ mảng kết quả ra chế độ xem. Đối với công ty và địa chỉ có các dữ liệu con bên trong nên ta sẽ hiển thị trên nhiều dòng của cùng một ô |
