项目效果图:
项目一: Http请求数据
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { TestService } from './service/test.service';
import { AppComponent } from './app.component';
import { Test001Component } from './test001/test001.component';
@NgModule({
declarations: [
AppComponent,
Test001Component
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [TestService],
bootstrap: [AppComponent]
})
export class AppModule { }
复制代码
test.component.ts
import { Component, OnInit } from '@angular/core';
import { TestService } from '../service/test.service'
@Component({
selector: 'app-test001',
templateUrl: './test001.component.html',
styleUrls: ['./test001.component.less']
})
export class Test001Component implements OnInit {
users:any[];
constructor(public testService:TestService) {
this.testService.getUsers().subscribe(users=>{
// console.log(users);
this.users = users;
})
}
ngOnInit() {
}
}
复制代码
test.component.html
<div *ngFor="let user of users">
<div class="well">
<ul class="list-group">
<li class="list-group-item">姓名: {{user.name}}</li>
<li class="list-group-item">邮箱:{{user.email}}</li>
<li class="list-group-item">电话: {{user.phone}}</li>
</ul>
</div>
</div>
复制代码
test.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class TestService {
constructor(
private http_client: HttpClient
) { }
getUsers(){
return this.http_client.get("http://jsonplaceholder.typicode.com/users");
}
}
复制代码