angular2学习笔记之服务和http
发布时间:2020-12-17 10:05:32 所属栏目:安全 来源:网络整理
导读:现在应用开发多为spa的前后分离,前后端通讯则使用http的接口通过json进行交互。angular2-demo 一、 效果图 1. 展现出来的效果 2. mysql的数据 二、代码实例 1. 服务 service import {Injectable} from '@angular/core';import { Http }from '@angular/http';
现在应用开发多为spa的前后分离,前后端通讯则使用http的接口通过json进行交互。angular2-demo 一、 效果图1. 展现出来的效果
2. mysql的数据
二、代码实例1. 服务 serviceimport {Injectable} from '@angular/core'; import { Http }from '@angular/http'; import * as api from './../api/Api'; import {Observable} from 'rxjs/Rx'; @Injectable() export class UserService { data:any; constructor(public http:Http) { this.http = http; } findAll():Observable<any> { return this.http.get(api.findAll).map((res:any)=> { return res.json(); }); } } 2.组件 HttpServiceimport {Component,OnInit} from '@angular/core'; import { UserService } from './../../service/UserService'; @Component({ selector: 'http-service',styles:[require('./HttpService.scss')],template: require('./HttpService.html'),providers: [UserService] }) export class HttpServiceComponent implements OnInit { admins:Object; data:Object; constructor(public userService:UserService) { this.userService = userService; } ngOnInit():void{ this.userService.findAll().subscribe((data:any) => { this.admins = data.adminUsers.content; console.log('in component : ',this.admins); }); console.log(' HttpServiceComponent ngOnInit :','enter'); } } 3. 模板 HttpService.html<ul *ngFor="let item of admins;let i = index"> <li>{{i+1}}.{{item.userName}}</li> </ul> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |