如何在Angular Using API(CRUD in Angular Usingnenenebb API)中获取特定

Question

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

这是我的应用程序组件.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的值。

这是我的编辑组件.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()函数在控制台中打印值时，它显示为未定义。

这是我的员工。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.componnt.ts。从app.components.ts，它将转到app.service.ts，在那里它将使用特定的id从API获取值。从app.service.ts，它会将值传递给edit.component.ts，并使用edit.components.ts，将值传递到edit.componnt.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文件中