如何使用角度2中的http调用删除和更新行数据？ [英] How do i delete and update a row data using http calls in angular 2?

问题描述

我尝试做员工添加删除并以角度更新数据。
我能够将数据添加到数组中。但我无法更新和删除我的数据。

I trying to do employee add delete and update data in angular. I am able to add data to the array. But I am unable to update and delete my data.

有人能告诉我如何进行删除和更新的HTTP调用吗？

Can someone tell me how to do an HTTP call for delete and update?

这是我在组件和服务中的代码。

This is my code in component and service.

import { Component } from '@angular/core';
    import { Observable} from 'rxjs';
    import { FormsModule } from '@angular/forms';

    import { Employee } from './employee';
    import { EmployeeService} from './employee.service';

    @Component({
        selector: 'employee-form',
        templateUrl: './employee-form.component.html',
        styleUrls: ['./employee-form.component.css']
    })

    export class EmployeeFormComponent{
        employees : Employee[];
        errorMessage : String;
        id : number;
        firstName : String;
        lastName  : String;
        EmployeeType : String;
        employee = new Employee();
        clicked = false;
        constructor(private employeeservice : EmployeeService){}
        ngOnInit(): void{
            this.fetchEmployees();
        }
            fetchEmployees(): void{
                this.employeeservice.getDetailsFromJson()
                .subscribe( employees => this.employees = employees,
                                        error => this.errorMessage = <any>error)
            }

            addEmployee(): void{
                this.employeeservice.addEmployees(this.employee)
                .subscribe(employee => {
                    this.fetchEmployees();
                        this.reset();
                        this.firstName = employee.firstname;
                        this.lastName = employee.lastname;
                        this.EmployeeType = employee.employeetype;
                        this.clicked = false;
                }, 
                error => this.errorMessage = <any>error);
            }
            deleteEmp(): void {
                    this.employeeservice.delete(this.employee.id).then(() => 
            }

            private reset(){
                this.employee.firstname = null; 
                this.employee.lastname = null;
                this.employee.employeetype = null;
            }
    }

服务：

import { Injectable } from '@angular/core';
import { Http, Response,Headers,RequestOptions} from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';
import {Employee} from './employee'

@Injectable()
    export class EmployeeService {
            empurl = 'api/employees';
            constructor (private http:Http){}
            getDetailsFromJson():Observable<Employee[]>{
                return this.http.get(this.empurl)
                        .map(this.extractData)
                        .catch(this.HandleErrorObservable);                        
            }
            addEmployees(employee: Employee): Observable<Employee>{
                let headers = new Headers({'Content-Type': 'application/json'});
                let options = new RequestOptions({headers: headers});
                return this.http.post(this.empurl,employee,options)
                        .map(this.extractData)
                        .catch(this.HandleErrorObservable)
            }
            delete(id: number): Promise<void> {
                let headers = new Headers({'Content-Type': 'application/json'});
                let options = new RequestOptions({headers: headers});
    const url = `${this.empurl}/${id}`;
    return this.http.delete(url, options)
      .toPromise()
      .then(() => null)
      .catch(this.HandleErrorObservable);
  }

            private extractData(res: Response){
                let body= res.json();
                return body.data || {}
            }
            private HandleErrorObservable(error : Response | any){
                console.log(error.message || error);
                return Observable.throw( error.message || error);
            }
    }

模板：

<h3>Employee Details</h3>
<div class="container"> 
  <div>
    <table class="table table-stripped table-bordered">
      <tr><th>Id</th><th>Firstname</th><th>Lastname</th><th>EmployeeType</th><th>Actions</th></tr>
      <tr *ngFor="let employee of employees"[class.selected]="employee === selectedEmployee">
        <td>{{employee.id}}</td>
        <td>{{employee.firstname}}</td>
        <td>{{employee.lastname}}</td>
        <td>{{employee.employeetype}}</td>
        <td><button class="btn btn-default" (click)="deleteEmp(); $event.stopPropagation()">Delete</button>
            <button class="btn btn-default" (click)="updateEmp(); $event.stopPropagation()"> Update</button>
        </td>
      </tr>
    </table>
  </div>
  <div>
    <div [hidden]="submitted">
<div class="container" >
    <h1>Employee Form</h1>
    <form class="form-horizontal" (ngSubmit) = "addEmployee()" #employeeform="ngForm">
      <div class="form-group ">
        <label for="firstname" class="control-label col-md-3">FirstName:</label>
        <div class="col-md-6">
        <input type="text" class="form-control col-md-6" id="firstname" required [(ngModel)]="employee.firstname" name="firstname" >


      </div>
      </div>
      <div class="form-group">
        <label for="lastname" class="control-label col-md-3">LastName:</label>
        <div class="col-md-6">
        <input type="text" class="form-control" id="lastname" required [(ngModel)]="employee.lastname" name="lastname">

        </div>
      </div>

      <input type="submit" class="btn btn-success "  [disabled]="!employeeform.form.valid" value="submit">


    </form>
    </div>
    </div>

如果有人解释它是如何做到的，我非常赞赏。

If someone explain how its done its much appreciated.

推荐答案

没有足够的声誉来评论....

Don't have enough reputation to comment....

一种方法是通过传递删除行您的后端期望的唯一属性..然后通过从后端获取数据以保持同步来重新加载视图。
这又取决于你的体系结构。

One way is to delete the row by passing the unique attribute that your backend is expecting.. and then reload the view by getting the data from backend to keep in sync. Again this depends on your architecture.

如果你不想进行后端调用，只需将你从数组中删除的数据切片。删除通话成功。

If you don't want to make a back end call, just slice the data u deleted from the array after the delete call is success.

这篇关于如何使用角度2中的http调用删除和更新行数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！