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

Question

我正在使用Laravel中的API在Angular中執行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（）函數在控制台中打印值時，它顯示為未定義。

這是我的employee.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文件中