Angular With API中的CRUD(更新)操作

Question

我是angular的新手，目前正在使用API尝试CRUD操作。

我有两个组件ListPage和一个EditPage，前者带有编辑按钮，后者带有编辑对象所需的TextFields。当我单击编辑时，调用函数(click)="editItem(dataItem)(dataItem是我需要编辑的对象(，并在ListComponent.ts中接收该对象。所以问题是我需要在中写什么代码

editItem(item: any) {
this.userToEdit = item;
}

打开"EditPage"，其TextFields填充了editItem中的值，以及我需要在EditPage.Comonent.ts中写些什么才能接收数据？考虑editItem仅具有值CCD_ 9和CCD_。

我的代码中的文件名与描述不同

编辑页面HTML

<form >
<div>
<input type="text" placeholder="UserNme" [(ngModel)]="USERNAME" name="c">
</div>
<div>
<input type="password" placeholder="Password" [(ngModel)]="PASSWORD" name="b">
</div>
<div>
<input type="text" placeholder="Email" [(ngModel)]="EMAIL" name="a">
</div>
<div>
<button (click)="editUser()">
EditUser
</button >
</div>
</form>

EditPAge Compos.ts

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-edit-page',
templateUrl: './edit-page.component.html',
styleUrls: ['./edit-page.component.css']
})
export class EditPAgeComponent implements OnInit {

USERNAME:string="";
PASSWORD:string="";
EMAIL:string="";
ID:number=0;
constructor() { }

ngOnInit(): void {
}
editUser() : void{
if(this.ID!=0)
{

}
}
}

第1页组件清单页面

<table class="table table-striped">
<thead>
<tr>
<th class="col-md-1">UserName</th>
<th class="col-md-5">Email</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let dataItem of UserList">
<td>
{{dataItem.USERNAME}}
</td>
<td>
{{dataItem.EMAIL}}
</td>
<td>
<button class="btn btn-light" (click)="deleteItem(dataItem.ID)">
Edit
</button>
</td>
<td>
<button class="btn btn-danger" (click)="deleteItem(dataItem.ID)">
Delete
</button>
</td>
</tr>
</tbody>

</table>
</div>
<div hidden="false" class="container">

</div>

和Page-1组件，即DIS中的ListPage.component.ts

import { Component, OnInit } from '@angular/core';
import { RouterLink } from '@angular/router';
import { AServiceService } from '../aservice.service';


@Component({
selector: 'app-page-one',
templateUrl: './page-one.component.html',
styleUrls: ['./page-one.component.css']
})


export class PageOneComponent implements OnInit {

UserList: any = [];
userToEdit: any;


constructor(private ser: AServiceService) { }

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


editItem(item: any) {
this.userToEdit = item;

}

deleteItem(item: number) {
this.ser.deleteUser(item).subscribe(data => {
alert(data.toString());
this.loadUSerList();
});
this.ngOnInit();
}
closeClick() {

}
loadUSerList() {
this.ser.getUsers().subscribe((data: any) => {
this.UserList = data;
console.log("LOG USERLIST");
})
}
}

我感谢任何帮助。尝试学习角度

Answer 1

有多种方法可以做到这一点。

1. 最常见的方法是使用参数将EditPage添加到您的路线中

   ｛路径："edit/：*"，组件：EditPageComponent｝，

将id作为参数传递，并从EditPage:上的服务中获取实际项目

• 将私有路由ActivatedRoute添加到您的构造函数参数中

• 获取nginit上的参数：

  this.route.params.subscribe((paramList:params(=>{if(paramList['*']==未定义(｛this.id=0；｝else｛this.cid=paramList['*']；｝

在这种情况下，您的editItem(项(应该是：

editItem(item: any) {
this.router.navigate(['/edit/' + item.id + '']);
}

当然，您需要将路由器添加到构造函数：

constructor(
private router: Router,
) { }

随时重新加载页面是安全的，因此这是一种非常常见的情况。

2. 将对象作为导航附加：

   editItem(item:any({this.router.navigation(['/edit']，｛state:｛item:this.userToEdit｝｝(；}

它有一个很大的缺点：用户无法重新加载编辑页面，因为它丢失了传递的对象。

3. 您可以使用弹出式编辑器(例如mat_dialog(并将项目传递给它。

   导出类EditPageComponent{editItem(item:any({const dialogConfig=新的MatDialogConfig((；dialogConfig.width='570px'；dialogConfig.height='520px'；dialogConfig.autoFocus=true；dialogConfig.data=项目；const dialogRef=this.dialog.open(TigenyOtrotdComponent，dialogConfig(；}

   构造函数(专用对话框：MatDialog，)｛｝}

4. 您可以将组件作为内联编辑器插入，并指定编辑器的输入和输出：

在EditPage.ts:上

export class EditPageComponent {
@Input() userToEdit: string;
@Output() onSave: EventEmitter<any> = new EventEmitter();

您可以在列表html:中的任何位置插入编辑器(并使用ngif语句使其可见或不可见(

<app-edit-user 
[userToEdit]="userToEdit"
(onSave)="hideEditor($event)"
>
</app-edit-user>

如果你这样列出，你甚至可以制作真正的内联编辑器：

<ng-container *ngfor...>
<tr *ngif="!item.inEdit">
...readonly fields in td-s...
</tr>
<tr *ngif="item.inEdit">
<app-edit-user [userToEdit]="item" (onSave)="item.inEdit = false"></app-edit-user>
</tr>
</ng-container>