Angular 和 API 中的 CRUD（更新）操作

Question

我是 angular 的新手，目前正在尝试使用 API.

进行 CRUD 操作

我有两个组件 ListPage，一个 Edit 按钮和一个 EditPage 需要 TextFields 来编辑我的对象。当我点击 Edit 函数时 (click)="editItem(dataItem) （dataItem 是我需要编辑的对象） 被调用并且对象在 ListComponent.ts。所以问题是我需要在里面写什么代码

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

打开 'EditPage'，其 TextFields 填充来自 editItem 的值我需要在 EditPage.Comonent.ts 里面写什么才能接收数据？考虑 editItem 仅具有值 ID 和 Name。

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

编辑页面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 Compo.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 页组件即 ListPAge

        <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>

和第 1 页组件 .ts 即 ListPage.component.ts in dis

    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");
        })
      }
    }

感谢任何帮助。努力学习 angular

Answer 1

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

最常见的方法是使用参数
将 EditPage 添加到您的路由
{ 路径：'edit/:*'，组件：EditPageComponent },

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

将私有路由：ActivatedRoute 添加到您的构造函数参数中
获取nginit上的参数：

this.route.params.subscribe((paramList: 参数) => { 如果（paramList['*'] ===未定义）{ this.id = 0; } else { this.id = paramList['*']; }

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

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

当然你需要在构造函数中添加路由：

constructor(
    private router: Router,
) { }

随时重新加载页面是安全的，所以这是一个很常见的场景。

将对象作为导航附加项传递：

editItem(项目：任意){ this.router.navigate(['/edit'], { state: { item: this.userToEdit }}); }

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

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

导出class EditPageComponent { editItem（项目：任何）{ const dialogConfig = new MatDialogConfig(); dialogConfig.width = '570px'; dialogConfig.height = '520px'; dialogConfig.autoFocus = 真； dialogConfig.data = 项目； const dialogRef = this.dialog.open(TigenyOtrotdComponent, dialogConfig); }

构造函数( 私人对话：MatDialog， ) { } }
您可以将组件作为内联编辑器插入并指定编辑器输入和输出：

在 EditPage.ts:

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

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

<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>

Angular 和 API 中的 CRUD（更新）操作

CRUD (Update) Operation in Angular With API

typescript

angular-components

angular