从模态弹出窗口中删除 Angular 中的表格行

Question

单击模式弹出窗口中的确认按钮后如何删除表格行？

删除行模式弹出窗口

我尝试了一些方法，但到目前为止都没有奏效。

我已经为添加、编辑和删除用户创建了单独的组件。 以下是我的代码。

开始.component.html

<div class="row py-3 animate__animated animate__fadeIn">    
  <div class="d-flex">
    <div class="w-25 me-auto">
      <mdb-form-control>
        <input mdbInput type="text" class="form-control" id="search-input" (keyup)="search($event)" />
        <label mdbLabel class="form-label" for="search-input">Search</label>
      </mdb-form-control>
    </div>
    <div>
      <button mdbRipple type="button" class="btn btn-primary btn-sm" (click)="addUser()">Create New</button>
    </div>
  </div>
  

  <div class="datatable mt-4">
    <table class="table datatable-table" aria-label="datatable"
      mdbTable mdbTableSort
      #datatable="mdbTable" #sortSearch="mdbTableSort"
      [dataSource]="listData" [striped]="true" [sort]="sortSearch" [pagination]="paginationSearch">
      <thead class="datatable-header table-dark">
      <tr>
        <th *ngFor="let header of headers" [mdbTableSortHeader]="header" scope="col">
          {{ header }}
        </th>
      </tr>
      </thead>
      <tbody class="datatable-body">
      <tr *ngFor="let data of datatable.data; let i = index" scope="row">
        <td>
          {{ data.id }}
        </td>
        <td>
          {{ data.name }}
        </td>
        <td>
          {{ data.position }}
        </td>
        <td>
          <button mdbRipple type="button" class="btn btn-primary btn-sm" (click)="editUser(data, i)" >Edit</button>&nbsp;
          <button mdbRipple type="button" class="btn btn-primary btn-sm" (click)="deleteUser(data, i)" >Delete</button>
        </td>
      </tr>
      </tbody>
    </table>
    <mdb-table-pagination #paginationSearch></mdb-table-pagination>
  </div>
</div>

开始.component.ts

import {Component, OnInit, ViewChild} from '@angular/core';
import {MdbTableDirective} from 'mdb-angular-ui-kit/table';
import {MdbModalRef, MdbModalService} from 'mdb-angular-ui-kit/modal';
import { AddUserFormComponent } from '../add-user-form/add-user-form.component';
import { EditUserFormComponent } from '../edit-user-form/edit-user-form.component';
import { DeleteUserFormComponent } from '../delete-user-form/delete-user-form.component';

export interface Person {
  id: string;
  name: string;
  position: string;
  isEdit: true;
}

@Component({
  selector: 'app-start',
  templateUrl: './start.component.html',
  styleUrls: ['./start.component.scss']
})
export class StartComponent implements OnInit {
  modalRefAdd: MdbModalRef<any> | null = null;
  modalRefEdit: MdbModalRef<any> | null = null;
  modalRefDelete: MdbModalRef<any> | null = null;
  selectedIndex: number = 0;

  constructor(private modalService: MdbModalService) {

  }

  ngOnInit(): void {
  }

  addUser(size: string = ''): void{
    this.modalRefAdd = this.modalService.open(AddUserFormComponent, {
      modalClass: size,
      data: {},
    });

    this.modalRefAdd.onClose.subscribe(res => {
      if(res != null) {
        this.listData = [...this.listData, res];
      } else {
        close();
      }
    });
  }

  editUser(data: any, index: number){
    this.selectedIndex = index;
    this.modalRefEdit = this.modalService.open(EditUserFormComponent, {
      modalClass: data,
      data: {data}
    });

    this.modalRefEdit.onClose.subscribe(res => {
      this.listData[this.selectedIndex] = res;
      this.datatable.search('');
    });
  }

  deleteUser(data: any, index: number) {
    this.selectedIndex = index;
    this.modalRefDelete = this.modalService.open(DeleteUserFormComponent, {
      modalClass: data,
      data: {data}
    });

    this.modalRefDelete.onClose.subscribe(res => {
      this.listData[this.selectedIndex] = res;
      this.datatable.search('');
    });
  }

  @ViewChild('datatable') datatable!: MdbTableDirective<Person>;

  headers = ['Employee ID', 'Name', 'Position', 'Actions'];

  listData: Person[] = [
    {
      id: 'Evonik042',
      name: 'Amrita Kaur',
      position: 'Manager',
      isEdit: true,
    },
    {
      id: 'Evonik067',
      name: 'Mahathir Abdul Wahib',
      position: 'Developer',
      isEdit: true,
    },
    {
      id: 'Evonik071',
      name: 'Tan KiatYao',
      position: 'Developer',
      isEdit: true,
    },
    {
      id: 'Evonik118',
      name: 'Haziq Morsim',
      position: 'IT Intern',
      isEdit: true,
    }
  ];

  search(event: Event): void {
    const searchTerm = (event.target as HTMLInputElement).value;
    this.datatable.search(searchTerm);
  }
}

删除用户表单.component.html

<!-- Delete user starts -->
<div id="delete-employee">
    <div class="modal-header evonik white-text">
        <h5 class="modal-title text-white">Delete Employee Details</h5>
        <button type="button" class="close pull-right" aria-label="Close" (click)="close()"><span aria-hidden="true" style="color: #000000;">×</span></button>
    </div>
  
    <div class="modal-body m-0 p-50">
        <p>Are you sure you would like to remove this employee?</p>
    </div>
    
    <div class="modal-footer mt-1">
        <button mdbRipple type="button" class="btn btn-primary" (click)="deleteRow(data)">Confirm</button>
        <button mdbRipple type="button" class="btn btn-outline-primary" (click)="close()">Cancel</button>
    </div>
</div>
<!-- Delete user ends -->

删除用户表单.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { MdbModalRef } from 'mdb-angular-ui-kit/modal';

@Component({
  selector: 'app-delete-user-form',
  templateUrl: './delete-user-form.component.html',
  styleUrls: ['./delete-user-form.component.scss']
})
export class DeleteUserFormComponent implements OnInit {

  userForm: FormGroup = new FormGroup({
    id: new FormControl('', [Validators.required]),
    name: new FormControl('', [Validators.required]),
    position: new FormControl('', [Validators.required])
  });

  data: any;

  constructor(public modalRefDelete: MdbModalRef<DeleteUserFormComponent>,
              public fb: FormBuilder) { }

  ngOnInit() {
    this.userForm.patchValue(this.data);
  }

  deleteRow(index: number) {
    this.data.splice(index, 1);
    //this.modalRefDelete.close();
  }

  close() {
    this.modalRefDelete.close();
  }

}

我希望有人可以帮助我解决这个问题。 先感谢您。

Answer 1

因此，如果更改是在数据库中进行的，那么您只需刷新父组件即可。

有几种方法可以刷新组件，您可以使用路由重新加载，也可以调用 oninit function。

你可以使用它来刷新路线：

 setTimeout(() => {
                window.location.reload();
              }, 1000);

或使用

this.ngOnInit();