实战Angular2+web api增删改查(三）

Angular2 实战：使用Web API进行CRUD操作

最新推荐文章于 2019-06-28 21:43:43 发布

原创

最新推荐文章于 2019-06-28 21:43:43 发布 · 1.5w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#UnitOfWork #Repository #angular #web api

本文档介绍了如何在Angular2 RC4环境中，结合Web API实现数据的增删改查。详细讲解了服务的创建，数据获取与更新，父组件和子组件的交互，以及模板和表单的使用。在服务中使用了Observables以确保数据同步，子组件通过Modal窗口展示编辑界面，并利用FormBuilder进行表单验证。

Angular2 开发

本示例使用了Angular2 RC4版本，另外由于使用了bootstrap，所以需要html中引入对应的css及js文件

入口

import { bootstrap }    from '@angular/platform-browser-dynamic';
import {myApp} from "./myApp";
import {
 
 HTTP_PROVIDERS} from "@angular/http";
bootstrap(myApp,[HTTP_PROVIDERS]).catch(err=>console.error(err));

这里由于要使用angular中的http所以需要在入口处先注入

服务

在此之前我们需要先定义DTO，由于我们传输DTO使用的是Json格式所以angular的DTO与webapi中DTO类型名称一致即可。

export interface groupDto {
    ID:string;
    GROUPNAME:string;
    NORDER:number;
    PARENTID:string;
    GROUPTYPE:string;
    GROUPCODE:string;
}

下面将定义groupservice来从webapi中获取数据、更新数据

/**
 * Created by Administrator on 2016-06-30.
 */
import {
 
 Injectable} from "@angular/core";
import {Http, Headers} from "@angular/http";
import 'rxjs/Rx';
import {groupDto} from "./models/groupDto";
import {Observer, Observable} from "rxjs/Rx";
@Injectable()
export  class groupservice{
    isSubmit:Observable<boolean>;
    private  observer:Observer<boolean>;

    private _baseURL: string="http://localhost:23273/api/GroupList";
    constructor(private _http: Http) {
        this.isSubmit= new Observable<boolean>(observer=>this.observer=observer).share();
    }
    getGroupList() {

        return this._http.get(this._baseURL).map(responce => responce.json());
    }
    getGroup(id:string){
        return this._http.get(this._baseURL+"/"+id).map(responce => responce.json());
    }
    addGroup(item:groupDto){
        var json = JSON.stringify(item);
        var params = 'json=' + json;
        var headers = new Headers();
        headers.append('Content-Type','application/json');
        headers.append('Accept','application/json');

        return this._http.post(this._baseURL,JSON.stringify(item),{
 
 headers: headers}).subscribe(
            data=>{
 
 console.log(data);},
            err => {
 
 console.log(err);},
            () => {
                console.log("Complete");
                if(this.observer!==undefined)
                    this.observer.next(true);

            }
        );
    }
    editGroup(id:string,item:groupDto){
        var json = JSON.stringify(item);
        var params = 'json=' + json;
        var headers = new Headers();
        headers.append('Content-Type','application/json');
        headers.append('Accept','application/json');

      &nbs