表格数据的角度下拉过滤器答案

【问题标题】：angular drop down filter on table data表格数据的角度下拉过滤器
【发布时间】：2021-04-06 19:26:45
【问题描述】：

AppComponent.ts

  export class ShowBranchesComponent implements OnInit, OnChanges {

  branches: any = [];
  branchName: any; // any
  branchcity: any;

  options = ['MUMBAI', 'KOLKATA', 'dehli', 'chandigarh', 'noida']
  selected: any;
  selectedData: any;


  constructor(private service: ShareService) { }

  ngOnInit(): void {
    // this.refreshBranchList();
    this.service.getBranchList().subscribe((response: any) => {
      this.branches = response;
      this.selectedData = this.branches;
    });
  }
  ngOnChanges() {
    this.selectedData = this.branches.filter(x => x.value === this.selected)
  }

  onSelect(val) {
    this.selectedData = this.branches.filter(x => x.value == val)
  }

AppComponents.html

<select [(ngModel)]="selectedBrand" (ngModelChange)="onSelect(selected)">
    <option *ngFor="let option of options" [value]="option">
        {{ option }}
    </option>
</select>
<tbody>
        <tr *ngFor="let branch of selectedData | orderBy: key: reverse | filter: branchName, selectedData">
            <td>{{ branch.branchId }}</td>
            <td>{{ branch.ifsc_code}}</td>
            <td>{{ branch.branch_name }}</td>
            <td>{{ branch.address }}</td>
            <td>{{ branch.city }}</td>
            <td>{{ branch.district }}</td>
            <td>{{ branch.state }}</td>
        </tr>
    </tbody>

问题是我想创建一个可以将选项数据与表数据匹配的函数。所以在我从下拉菜单中选择选项后，我的表格就会更新。

【问题讨论】：

你的 html 中的过滤管道是什么？
我没有使用过滤器管道，我也在使用不使用管道的搜索功能，希望它也能正常工作。
在您的 tr html 中有一个过滤器管道，它接受 branchName 和 selectedData
哦，我正在使用 django rest 框架，它在 appComponent.ts getBranchList() 中。

标签： angular django-rest-framework

【解决方案1】：

你没有在对象上循环，所以很明显没有给出输出：

onSelect(val) {
console.log(val)
this.selectedData = this.branches.filter((x: { city: any; }) => x.city == val)

像这样改变你的功能。

【讨论】：