如何使用 API 在 Angular 中获取特定 ID 的值（CRUD 在 Angular 使用 API）

Question

我正在 Angular 中使用 Laravel 中的 API 执行 CRUD。我已经添加了值并获取了值，但我无法使用 Id 更新值。

这是我的app.component.ts：

import {Component } from '@angular/core';
import {HttpClient, HttpHeaders } from '@angular/common/http';
import {Employee} from './employees';
import {EditComponent} from './edit/edit.component';
import {AppService} from './app.service';
import {Router} from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [AppService]
})
export class AppComponent {
    form:any = {}
    msg: string = null;
    employees: Employee[];
    constructor( public http: HttpClient,private appService:AppService,private router: Router)
    {}

    onSubmit(){ 
      const httpOptions = {
        headers: new HttpHeaders({ 'Content-Type': 'application/json' })
      };
      this.http.post('http://127.0.0.1:8000/api/employee',this.form,httpOptions)
      .subscribe(function(s){console.log('sss',s);},function(e){console.log('e',e);});
    }

    ngOnInit() {
    }

    getEmployee():void{
       this.appService.getEmployees().subscribe(employees=>(this.employees = employees))
     }
    }

    public editComponent: boolean = false;
    loadMyChildComponent($id) {
      this.editComponent = true;
      this.appService.setCurrentId($id);
    }
 }

在 loadMyChildComponent($id) 中，我正在获取要编辑的行的 ID。

这是我的app.service.ts:

import {Injectable } from '@angular/core';
import {HttpClient,HttpParams} from '@angular/common/http';
import {HttpHeaders} from '@angular/common/http';
import {Observable} from 'rxjs';
import {Employee} from './employees';
import {EditComponent } from './edit/edit.component';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable({
  providedIn: 'root'
})
export class AppService {
  employee: Employee[];
  id: number;
  private url = 'http://localhost:8000/api/employee/';
  constructor(private http: HttpClient) { }

  setCurrentId(id){
    this.id=id;
  }
  getCurrentId(){
   return  this.id;
  }

   getEmployees(): Observable<Employee[]>{
    return this.http.get<Employee[]>(`http://localhost:8000/api/employees`); 
   }

   editEmployees(id): Observable<{}>
   {
   const url2 = `http://localhost:8000/api/employee/${id}`;
   return this.http.get<Employee[]>(url2);
   }

  updateEmployees(employee: Employee): Observable<any> {
  return this.http.put(this.url, employee, httpOptions);
  }

}

在此 app.service.ts 中，我使用 editEmployees(id) 函数获取特定 ID 的值。

这是我的edit.component.ts：

import {Component, OnInit, Input } from '@angular/core';
import {AppService } from '../app.service';
import {Employee } from '../employees';
import {Router } from '@angular/router'; 
import {HttpClient, HttpHeaders } from '@angular/common/http';
import {NgForm} from '@angular/forms';
import {Observable} from 'rxjs';
import {ActivatedRoute} from '@angular/router';
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
@Component({
  selector: 'app-edit',
  templateUrl: './edit.component.html',
  styleUrls: ['./edit.component.css']
})
export class EditComponent implements OnInit {
  @Input() employee: Employee;
  form:any = {}

  constructor(public http: HttpClient,private appService:AppService,private router: Router,private route: ActivatedRoute) { }

  ngOnInit():void {
    this.editEmployees();
  }

  editEmployees(): void {
    const id =  this.appService.getCurrentId();
    this.appService.editEmployees(id).subscribe(employee => employee);
     console.log(id);
     console.log(employee);
  }

  onformSubmit():void{ 
    this.appService.updateEmployees(this.form.id)
     .subscribe(employee => employee = employee);
}
}

当我使用 editEmployees() 函数在控制台中打印值时，它显示未定义。

这是我的employees.ts：

export interface Employee{
    id: number;
    username:string;
    email:string;
    mobile:string;
    password:string;
}

这是我的app.component.html：

<table class="table"> 
  <tr>
  <th>Id</th>
  <th>User Name</th>
  <th>Email</th>
  <th>Mobile</th>
  <th>Edit</th>
  <th>Delete</th>
  </tr>
  <tr *ngFor="let employee of employees">
    <td>{{employee.id}}</td>
    <td>{{employee.username}}</td>
    <td>{{employee.email}}</td>
    <td>{{employee.mobile}}</td>
    <td><button (click)="loadMyChildComponent(employee.id);" class="btn btn-primary" [routerLink]="['/edit',employee.id]">Edit</button></td>
    <td><button class="btn btn-danger" (click)="delete(employee)" > Delete</button></td>
</table>

流程是：当我单击 app.component.html 中的编辑按钮时，它将获取 ID 并转到 app.component.ts。从 app.component.ts，它将转到 app.service.ts，在那里它将使用特定的 Id 从 API 获取值。从 app.service.ts，它会将值传递给 edit.component.ts，使用 edit.component.ts，它会将值传递给 edit.component.html。

但问题是，在edit.component.ts中，它在editEmployees() 函数中显示未定义。非常感谢任何帮助。

Answer 1

更改以下内容：

this.appService.editEmployees(id).subscribe(employee => employee);
 console.log(id);
 console.log(employee);

至

this.appService.editEmployees(id).subscribe(employees => {
   this.employee = employees[0];
   console.log(id);
   console.log(employee);
});

在您的 edit.component 文件中

如何使用 API 在 Angular 中获取特定 ID 的值（CRUD 在 Angular 使用 API）

How to get values for the particular Id in Angular Using API (CRUD In Angular Using API)

html

crud

laravel

typescript

angular