Question

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>

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

Answer 1

您没有遍历对象，因此很明显不提供输出：

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

像这样改变你的函数。

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

1 个答案: