Angular 如何制作一个可以不断创建、更新、删除和编辑数据的角度数据表组件？

这是我的问题，我有这个组件来创建一个包含不同类型tbody数据的datatable，然后我有这个组件：

模板：

<div class="table-responsive">
    <table 
        datatable
        [dtOptions]="dtOptions"
        [dtTrigger]="dtTrigger"
        class="table table-hover"
        [ngClass]="extraClass"
        width="100%">
        <thead>
            <tr>
                <th *ngFor="let column of columns">{{ column }}</th>
            </tr>
        </thead>
        <tfoot *ngIf="footer">
            <tr>
                <th *ngFor="let column of columns">{{ column }}</th>
            </tr>
        </tfoot>
        <tbody>
            <ng-content></ng-content>
        </tbody>
    </table>
</div>

<div *ngIf="categories.length <= 0">
    <!-- Loading... -->
</div>
<div [hidden]="categories.length <= 0">
    <app-table [columns]="['Nombre', 'Acciones']">
        <tr *ngFor="let category of categories">
            <td class="align-middle">{{ category.name }}</td>                    
            <td>
                <div class="text-center">
                    <div class="btn-group">
                        <button (click)="editCategory(category)">Edit</button>
                        <button (click)="deleteCategory(category)">Delete</button>
                    </div>
                </div>
            </td>
        </tr>
    </app-table>
</div>

{{column}}
{{column}}

组成部分：

import { Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
import { Subject } from 'rxjs';

import { datatableLanguage } from "../../data/index";

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html'
})
export class TableComponent implements OnInit, OnChanges, OnDestroy {

  @Input()
  public columns: Array<string>;

  @Input()
  public extraClass: string;

  @Input()
  public footer: boolean;

  @Input()
  public lengthChange: boolean;
  
  @Input()
  public info: boolean;

  public dtOptions: DataTables.Settings;
  public dtTrigger: Subject<any>;

  constructor() {
    
    this.dtOptions = {};
    this.dtTrigger = new Subject<any>();

    this.columns = new Array<string>(0);
    this.extraClass = '';
    this.footer = true;
    this.lengthChange = true;
    this.info = true;
  }

  //Angular methods
  ngOnInit(): void {
    this.checkRequiredFields();
    
    this.dtOptions = {
      "language": datatableLanguage,
      "responsive": true,
      "lengthChange": this.lengthChange,
      "info": this.info
    }
  }

  ngOnChanges(): void {
    this.checkRequiredFields();
  }

  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe();
  }

  //Private methods
  private checkRequiredFields(): void {
    if(this.columns.length <= 0)
      throw new Error("Attribute 'columns' is required.");
  }

  //Public methods

  public renderTable() {
    this.dtTrigger.next();
  }
}

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

import { TableComponent } from '@modules/others/app-common/components';

export interface Category {
  id: number;
  name: string;    
}

//Services
import { CategoriesService } from "../../services/index";

@Component({
  selector: 'app-categories',
  templateUrl: './categories.component.html'
})
export class CategoriesComponent implements OnInit {

  public categories: Array<Category>;

  @ViewChild(TableComponent)
  private table!: TableComponent;

  constructor(
    private categoriesService: CategoriesService
  ) {
    this.categories = new Array<Category>(0);
  }

  ngOnInit(): void {

    this.getCategories();
  }

  private getCategories(): void {
    
    this.categoriesService.getCategories().subscribe( 
      response => {
        this.categories = response;
        this.table.renderTable();
      },
      error => {throw new Error(error)}
    );
  }

  private createCategory(category: Category): void {
    
    this.categoriesService.saveCategory(category).subscribe(
      response => {

        this.categories.push(category);
      },
      error => {throw new Error(error)}
    );
  }

  private editCategory(category: Category): void {

    this.categoriesService.updateCategory(category).subscribe(
      response => {

        const index: number = this.categories.map((x) => { return x.id }).indexOf(category.id);
        this.categories[index] = category;
      },
      error => {throw new Error(error)}
    );
  }

  public deleteCategory(category: Category): void {
    
    this.categoriesService.deleteCategory(category.id).subscribe(
      response => {

        const index: number = this.categories.map((x) => { return x.id }).indexOf(category.id);
        this.categories.splice(index, 1);
      },
      error => {throw new Error(error)}
    );
  }
}

从'@angular/core'导入{Component，Input，OnChanges，OnDestroy，OnInit}；
从'rxjs'导入{Subject}；
从“../../data/index”导入{datatableLanguage}”；
@组成部分({
选择器：“应用程序表”，
templateUrl:“./table.component.html”
})
导出类TableComponent实现OnInit、OnChanges和OnDestroy{
@输入（）
公共列：数组；
@输入（）
公共类外：字符串；
@输入（）
公共页脚：布尔值；
@输入（）
公共长度更改：布尔值；
@输入（）
公共信息：布尔；
公共dtOptions：数据表。设置；
public dtTrigger:Subject），我想使用这个库，因为我有分页、搜索等功能，但我应该切换到另一个库，或者我必须做什么