Angular Ng多选下拉列表和数据过滤

“ng multiselect dropdown”可用于筛选包含来自数据库的数据的表

我正在尝试筛选选择任何下拉项的数据

这些是html文件中的代码

<div class="container">
  <ng-multiselect-dropdown
    [placeholder]="'custom placeholder'"
    [settings]="dropdownSettings"
    [data]="data"
    (onSelect)="onItemSelect($event)"
    (onSelectAll)="onSelectAll($event)"
  >
  </ng-multiselect-dropdown>
</div>

---

是否可以调用一个函数，以便在选择任何下拉项时过滤表中的数据。

为需要在表中显示的数据维护一个单独的数组

试着这样做：

.ts

.html

身份证件
事务类型
{{item.id}
{{item.transactionType}

---

我很感激，我还需要添加一些逻辑，但这一点为更多的成功打开了大门。非常感谢欢迎您，如果有帮助，请投票并接受答案

dropdownList = []; selectedItems = [];

dropdownSettings: IDropdownSettings;

ngOnInit(): void { this.dropdownList = this.data;

this.dropdownSettings = {
  singleSelection: false,
  idField: 'id',
  textField: 'transactionType',
  selectAllText: 'Select All',
  unSelectAllText: 'UnSelect All',
  itemsShowLimit: 3,
  allowSearchFilter: true
};}
onItemSelect(item: any) { item; } onSelectAll(items: any) { items; }

data = [];
tableData = [];
selectedIds = [];

 ngOnInit(): void {
    this.data = [
      { id: 1, transactionType: "Hanoi" },
      { id: 2, transactionType: "Lang Son" },
      ...
    ];

    this.dropdownList = this.data;
  
}

 onItemSelect(item: any) {
    this.selectedIds.push(item.id);
    this.resetTable();
  }
  onSelectAll(items: any) {
    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))
    ];
  }

  <ng-multiselect-dropdown [placeholder]="'custom placeholder'" [settings]="dropdownSettings" [data]="data"
    (onSelect)="onItemSelect($event)" (onSelectAll)="onSelectAll($event)" (onDeSelect)="onItemDeSelect($event)">
  </ng-multiselect-dropdown>

<table>
  <tr>
    <th>id</th>
    <th>transactionType</th>
  </tr>
  <tr *ngFor="let item of tableData">
    <td>{{item.id}}</td>
    <td>{{item.transactionType}}</td>
  </tr>
</table>