html - วิธีรับค่าของ Id เฉพาะใน Angular โดยใช้ API (CRUD ใน Angular โดยใช้ API)

ฉันกำลังทำ CRUD ใน Angular โดยใช้ API ของ Laravel ฉันได้เพิ่มค่าลงไปและดึงค่ากลับมาแล้ว แต่ฉันไม่สามารถอัปเดตค่าตาม 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 นี้ ฉันกำลังดึงค่าของ ID เฉพาะโดยใช้ฟังก์ชัน editEmployees(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() มันแสดงค่าเป็น undefined

นี่คือ 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 ซึ่งจะดึงค่าจาก API โดยใช้ Id ที่กำหนด จาก app.service.ts มันจะส่งค่ามายัง edit.component.ts และโดยใช้ edit.component.ts มันจะส่งค่ามายัง edit.component.html

แต่ปัญหาคือ ในไฟล์ edit.component.ts มันแสดงค่า undefined ในฟังก์ชัน editEmployees() ขอความช่วยเหลือด้วยครับ/ค่ะ

คำตอบ #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 ของคุณ