Блог

Вот в чем моя проблема. У меня есть список таких папок :

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

}
 

Все данные управляются службой папок, указанной ниже. Только он взаимодействует с базой данных. Когда я публикую, получаю или удаляю элемент из базы данных, сервис делает это.
Моя проблема заключается в следующем:
Когда я создаю элемент, база данных сама управляет идентификатором, я имею в виду, что база данных выбирает идентификатор путем автоматического создания. Но чтобы сразу удалить его после, мне нужен этот идентификатор ! Я нашел только два решения, которые кажутся мне странными:

• Обновите представление, выполнив другой запрос «getFolders». Но если список огромен, мне придется делать огромный запрос get после каждого запроса post…
• Выберите идентификатор в приложении, но это изменит всю мою логику приложения… Есть какие-нибудь идеи ?

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

  }

В зависимости от того, как настроен ваш сервер, программа http.post часто возвращает новый сохраненный объект с идентификатором, заданным внутренним сервером. Таким образом, вы можете получить доступ к нему в своей подписке, что-то вроде этого:

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

Это помогает?

Было бы легче помочь, если бы мы знали, что такое ваша база данных и ваш сервер.

Получить идентификатор обратно после добавления элемента не сложно, но если вы действительно не можете, я работал с базой данных, где нам приходилось использовать идентификатор GUID (который не является первичным ключом) для идентификации наших элементов в базе данных. Просто грустно добавлять поле в свою таблицу только для того, чтобы удалить элемент.

Идентификатор GUID может быть сгенерирован в угловой части, поэтому легко вызвать УДАЛЕНИЕ или что угодно, что вы хотите.