方法更新Angular CLI

Question

我需要在表格中更新一行。

當我單擊“編輯”時，該操作必須將我重定向到詳細信息表單，在該表單中還要創建用戶。

這是我的listComponent.ts：

export class EmployeeListComponent implements OnInit {
  employees: Observable<Employee[]>;

  constructor(private employeeService: EmployeeService) {}

  ngOnInit() {
    this.reloadData();
  }

  reloadData() {
    this.employees = this.employeeService.getEmployeesList();
  }

  deleteEmployee(id: number) {
    this.employeeService.deleteEmployee(id)
      .subscribe(
        data => {
          console.log(data);
          this.reloadData();
        },
        error => console.log(error));
  }

  updateEmployee(id: number) {
    /*LOGIC*/
  }
}

如您所見，delete方法用於服務的刪除，因此我必須對更新執行相同的操作，以將更改也保存在服務器中。

這是我的service.ts：

export class EmployeeService {

  private baseUrl = 'http://localhost:8080/api/employees';

  constructor(private http: HttpClient) { }

  getEmployee(id: number) {
    return this.http.get(`${this.baseUrl}/${id}`);
  }

  createEmployee(employee: any) {
    return this.http.post(`${this.baseUrl}`, employee);
  }

  updateEmployee(id: number, value: any) {
    return this.http.put(`${this.baseUrl}/${id}`, value);
  }

  deleteEmployee(id: number): Observable<any> {
    return this.http.delete(`${this.baseUrl}/${id}`, { responseType: 'text' });
  }

  getEmployeesList(): Observable<any> {
    return this.http.get(`${this.baseUrl}`);
  }
}

在這里您可以看到我的details.html：

<div *ngIf="employee">
  <div>
    <label>Name: </label> {{employee.firstName}}
  </div>
  <div>
    <label>Age: </label> {{employee.lastName}}
  </div>
  <div>
    <label>Active: </label> {{employee.emailId}}
  </div>
  <div>
    <label>Active: </label> {{employee.active}}
  </div>

  <span class="button is-small btn-primary" *ngIf='employee.active' (click)='updateActive(false)'>Inactive</span>

  <span class="button is-small btn-primary" *ngIf='!employee.active' (click)='updateActive(true)'>Active</span>

  <span class="button is-small btn-danger" (click)='deleteEmployee()'>Delete</span>

  <hr/>
</div>

如何編寫在詳細信息頁面中重定向頁面並保存所有更改的方法？

Answer 1

我認為您可以根據需要參考以下鏈接： 演示鏈接

您也可以訪問教程鏈接以獲取詳細說明： 英雄教程-Angular.io