在angular中，如何在view和db中添加element，然后在不知道id的情况下直接删除？

Question

这是我的问题。我有一个这样的文件夹列表：

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Subscription } from 'rxjs';
import { Folder } from '../models/folder.model';
import { FoldersService } from '../services/folders.service';

@Component({
  selector: 'app-folders-list',
  templateUrl: './folders-list.component.html',
  styleUrls: ['./folders-list.component.scss']
})
export class FoldersListComponent implements OnInit {

  folders: Folder[];
  folderSubscription: Subscription;

  constructor(private foldersService: FoldersService) { }

  ngOnInit(): void {
    this.folderSubscription = this.foldersService.folderSubject.subscribe(
      (folders: Folder[]) => {
        this.folders = folders;
      }
    );
    this.foldersService.emitFolderSubject();
  }

  ngOnDestroy() {
    this.folderSubscription.unsubscribe();
  }

  onSubmit(form: NgForm) {
    const title = form.value['title'];
    const newFolder = new Folder(title);
    this.foldersService.createNewFolder(newFolder);
  }

}

所有数据都由下面的文件夹服务管理。只有他与数据库交互。当我 post 从数据库中获取或删除元素时，服务会执行此操作。我的问题是以下一个：当我创建一个元素时，数据库自己管理 id，我的意思是数据库通过自动增量选择一个 id。但是之后直接删除它，我需要这个id！我只找到了两个对我来说很奇怪的解决方案：

通过执行其他“getFolders”请求重新更新视图。但是如果列表很大，我将不得不在每个 post 请求后发出一个巨大的 get 请求...

在应用程序中选择一个 ID，但这会改变我的整个应用程序逻辑... 有什么想法吗？

  import { Injectable } from '@angular/core';
  import { Subject } from 'rxjs';
  import { environment } from 'src/environments/environment';
  import { Folder } from '../models/folder.model';
  import { HttpClient } from '@angular/common/http';


  @Injectable({
    providedIn: 'root'
  })
  export class FoldersService {

    private folders: Folder[] = [];
    folderSubject = new Subject<Folder[]>();

    private url:string = environment.BACKEND_HTTPS_SERVER;
    private endpoint:string = "/folders";

    constructor(private http: HttpClient) {
      this.getFolders();
    }

    emitFolderSubject() {
      this.folderSubject.next(this.folders.slice());
    }

    getFolders() {
      this.http
        .get<any>(this.url+this.endpoint)
        .subscribe(
          (response) => {
            this.folders = response;
            this.emitFolderSubject()
          },
          (error) => {
            console.log('Error : ' + error);
          }
        )
    }

    createNewFolder(newFolder: Folder) {
      //this.folders.push(newFolder);
      this.http
        .post(this.url+this.endpoint, {
          "title": newFolder.title
        })
        .subscribe(
          (_) => {
            console.log("Successfully added.");
            this.getFolders();
          },
          (error) => {
            console.log("Error : ", error);
          }
        )
    }

    deleteFolder(id: number) {
      const elementPos = this.folders.map(function(o) { return o.folderId;}).indexOf(id);
      this.folders.splice(elementPos,1);
      this.http
        .delete(this.url+this.endpoint+"/"+id)
        .subscribe(
          (_) => {
            console.log("Successfully deleted.");
            this.emitFolderSubject();
          },
          (error) => {
            console.log("Error : ", error);
          }
        )
    }

}

Answer 1

根据后端的配置方式，http.post 通常 returns 新保存的对象的 ID 由后端服务器设置。所以你可以在你的订阅中访问它，像这样：

.subscribe(
          folder => {
            console.log("Successfully added folder: " + folder.id);
          },
          (error) => {
            console.log("Error : ", error);
          }
        )

有帮助吗？

Answer 2

如果我们知道您的数据库和后端是什么，会更容易提供帮助。

添加项目后取回 Id 并不难，但如果你 reallllllyy 做不到，我以前工作在我们必须使用 GUID（不是主键）来识别数据库中的项目的数据库上。在你的table中添加一个字段只是为了删除一个项目，这真是令人难过。

GUID 可以在 Angular 端生成，因此很容易调用 DELETE 或任何你想要的。

在angular中，如何在view和db中添加element，然后在不知道id的情况下直接删除？

In angular, how to add element to the view and db, then delete it directly after without knowing the id?

database

service

subject

angular