删除网页上的过滤项目后，过滤后的表格数据未恢复到以前的状态

Question

我使用 ng-multiselect 下拉菜单从 db 中获取数据，这些下拉菜单用于过滤网页上的数据表。当您选择一个下拉菜单时，该项目会过滤表格，但是当您在网页上取消选择此过滤项目时，数据表不会返回其初始状态。表格数据从网页中消失。我想要一个条件，当我取消选择项目时，表数据返回到它的初始状态。

.ts

  tableData: ITransactionDetail[];
  data: ITransactionDetail[];

 selectedItems = [];
 selectedIds = [];

dropdownSettings: IDropdownSettings;

 this.dropdownSettings = {
  singleSelection: false,
  idField: 'id',
  textField: 'transactionType',
  selectAllText: 'Select All',
  unSelectAllText: 'UnSelect All',
  itemsShowLimit: 3,
  allowSearchFilter: true
  };

  onItemSelect(item: any) {
  this.selectedIds.push(item.id);
  this.resetTable();
   }
  onSelectAll() {
  this.selectedIds = this.data.map(x => x.id);
  this.resetTable();
   }
  onDeSelectAll() {
  this.selectedIds = [];
  this.resetTable();
  }
 onItemDeSelect(item: any) {
 this.selectedIds.splice(this.selectedIds.indexOf(item.id), 1);
 this.resetTable();
  }
  resetTable() {
 this.tableData = [...this.data.filter(x => this.selectedIds.includes(x.id))];
 } 

.html

      <th mat-header-cell *matHeaderCellDef>
       transactionType
       <div>
      <ng-multiselect-dropdown
      [placeholder]="'Select'"
      [settings]="dropdownSettings4"
      [data]="data"
      (onSelect)="onItemSelect($event)"
      (onSelectAll)="onSelectAll($event)"
      (onDeSelect)="onItemDeSelect($event)"
       >
      </ng-multiselect-dropdown>
    </div>
  </th>
<td mat-cell *matCellDef="let element">{{ element.transactionType }}</td>

Answer 1

试试这样：

onDeSelectAll() {
    this.selectedIds = [];
    this.tableData = [...this.data];
}

onItemDeSelect(item: any) {
   this.selectedIds.splice(this.selectedIds.indexOf(item.id), 1);
   if (this.selectedIds.length > 0) {
     this.resetTable();
   } else {
     this.tableData = [...this.data];
   }
}

查看Demo