Question

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

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

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

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>

如果有人解释它是如何完成的，那就非常感激。

Answer 1

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

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

如果您不想进行后端呼叫，只需在删除呼叫成功后对从阵列中删除的数据进行切片。

如何使用角度2中的http调用删除和更新行数据？

1 个答案: