每次修改后如何使角度材料表刷新

Question

我目前正在从事一个涉及类别表的角度项目。
用户可以使用我添加的组件或角度材料模块中的组件通过表格创建、读取、更新和删除类​​别。

这是我的html代码：

<main>
  <nav class="navbar navbar-light bg-success" (click)="this.openCreate()">
    <div class="container-fluid">
      <a class="navbar-brand"><i class="fa-solid fa-file-circle-plus"></i> Add Category</a>
    </div>
  </nav>
  <br>
  <div class="container">
    <div class="row">
      <div class="col-12">
        <mat-form-field appearance="fill" class="container-fluid">
          <input title="Filter" matInput placeholder="Filter.." autocomplete="off" (keyup)="filterData($event)">
        </mat-form-field>
        
        <table mat-table matSort [dataSource]="dataSource" class="mat-elevation-z8 container">
          
          <!-- Position Column -->
          <ng-container matColumnDef="id">
            <th mat-header-cell mat-sort-header *matHeaderCellDef> Id. </th>
            <td mat-cell *matCellDef="let element"> {{element.id}} </td>
          </ng-container>
        
          <!-- Name Column -->
          <ng-container matColumnDef="name">
            <th mat-header-cell mat-sort-header *matHeaderCellDef> Name </th>
            <td mat-cell *matCellDef="let element"> {{element.name}} </td>
          </ng-container>
        
          <!-- Weight Column -->
          <ng-container matColumnDef="description">
            <th mat-header-cell mat-sort-header *matHeaderCellDef> Description </th>
            <td mat-cell *matCellDef="let element"> {{element.description}} </td>
          </ng-container>
        
          <!-- Symbol Column -->
          <ng-container matColumnDef="createdat">
            <th mat-header-cell mat-sort-header *matHeaderCellDef> Created At </th>
            <td mat-cell *matCellDef="let element"> {{element.createdat}} </td>
          </ng-container>

          <ng-container matColumnDef="actions">
            <th mat-header-cell *matHeaderCellDef> Actions </th>
            <td mat-cell *matCellDef="let element">
              <button title="Edit" type="button" class="btn btn-success"(click)="this.edit(element.id)"><i class="fas fa-edit"></i></button>
              <button title="Delete" type="button" class="btn btn-danger" (click)="this.delete(element.id)"><i class="far fa-trash-alt"></i></button>
            </td>
          </ng-container>
        
          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
        <mat-paginator #paginator
        [pageSize]="5"
        [pageSizeOptions]="[5, 10, 25, 100]">
        </mat-paginator>

        
      </div>
    </div>
  </div>
</main>

这是我的 component.ts 文件：

export class CategoriesComponent implements OnInit {
  //TABLE CONTENT
  displayedColumns= ['id', 'name', 'description', 'createdat', 'actions'];
  dataSource!:MatTableDataSource<any>;

  //VARIABLES
  addCategorycheck:boolean = false;
  isEditing:boolean = false;

  @ViewChild('paginator') paginator!: MatPaginator;
  @ViewChild(MatSort) matSort!: MatSort;

  constructor(private categoriesAPI: ApiService, public router: Router, private dialog: MatDialog){}

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

  filterData($event: any)
  {
    this.dataSource.filter = $event.target.value;
  }


  // GETS CATEGS
  getCategories(): void{
    this.categoriesAPI.getCategories().subscribe((response) =>{
      this.dataSource = new MatTableDataSource(response);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.matSort;
    })
  }


  // CREATES CATEGS
  openCreate(){
    this.dialog.open(AddcategoryComponent, {
      data:{
        test: 'dwwdwdw'
      }
    });
  }


  // DELETES CATEG
  edit(id: number){
    this.dialog.open(CategoryComponent, {
      data:{
        id: id
      }
    });
  }

  // DELETES CATEG
  delete(id: number){
        Swal.fire({
          title: 'Are you sure?',
          text: "You won't be able to revert this!",
          icon: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#3085d6',
          cancelButtonColor: '#d33',
          confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
          if (result.isConfirmed) {
            this.categoriesAPI.deleteCategory(id).subscribe(() => {});
            Swal.fire({
              position: 'top-end',
              icon: 'success',
              title: 'Your work has been saved',
              showConfirmButton: false,
              timer: 1500
            })
          }
        })
  }

}

您不必真正阅读它来理解我的问题，它只是为了上下文
无论如何，我的问题是：是否可以在用户完成每次操作后自动刷新表？因为目前更改只发生在数据库中，用户必须手动重新加载整个页面才能看到更改。

我也不想使用 window.location.reload 重新加载整个页面，我只想在可能的情况下加载表格。

如果您有任何想法，请告诉我。谢谢

Answer 1

如果我正确理解你，你想在任何用户操作（编辑/删除）之后重新创建你的表； 只需在用户完成每个操作后调用 getCategories() 方法即可。

edit(id: number){
this.dialog.open(CategoryComponent, {
  data:{
    id: id
  }
});
 //in the end of method
 this.getCategories();  
}

同样在删除：

delete(id: number){
    Swal.fire({
      title: 'Are you sure?',
      text: "You won't be able to revert this!",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes, delete it!'
    }).then((result) => {
      if (result.isConfirmed) {
        this.categoriesAPI.deleteCategory(id).subscribe(() => {});
        Swal.fire({
          position: 'top-end',
          icon: 'success',
          title: 'Your work has been saved',
          showConfirmButton: false,
          timer: 1500
        })
      }
    })
 //here
   this.getCategories();
 }