Angular实现下拉选项匹配表格数据并自动更新表格的问题

Let's fix this step by step — I spot several mismatches and logical issues in your code that are stopping the dropdown from updating the table properly:

1. Variable & Template Binding Mismatches #

First, your template uses selectedBrand for ngModel, but your component class defines selected as the dropdown's bound variable. This disconnect means the component never gets the selected value from the dropdown.

2. Incorrect Filter Logic #

Your filter uses x.value to match branches, but from your table template, it looks like your branch data uses a city field. Plus, your options have mixed casing (like dehli vs MUMBAI), which will break matches if your backend data uses consistent casing.

3. Unused ngOnChanges Method #

Your component doesn't have any @Input() properties, so ngOnChanges will never trigger. This method is unnecessary here and can be removed.

4. Broken ngModelChange Parameter #

You're passing selected to onSelect, but you need to pass the actual selected value from the event ($event).

Corrected Component Code (ShowBranchesComponent.ts) #

import { Component, OnInit } from '@angular/core';
import { ShareService } from './path-to-your-share-service'; // Update path as needed

@Component({
  selector: 'app-show-branches',
  templateUrl: './show-branches.component.html',
  styleUrls: ['./show-branches.component.css']
})
export class ShowBranchesComponent implements OnInit { 
  branches: any[] = []; 
  branchName: string = ''; 
  branchCity: string = ''; // Fixed camelCase naming
  options = ['MUMBAI', 'KOLKATA', 'DEHLI', 'CHANDIGARH', 'NOIDA']; // Standardized casing
  selected: string | undefined; 
  selectedData: any[] = []; 

  constructor(private service: ShareService) { } 

  ngOnInit(): void { 
    this.service.getBranchList().subscribe((response: any) => { 
      this.branches = response; 
      this.selectedData = [...this.branches]; // Shallow copy to avoid reference issues
    }); 
  } 

  onSelect(val: string) { 
    this.selected = val;
    
    // Case-insensitive filter to match city values regardless of casing
    this.selectedData = this.branches.filter(branch => 
      branch.city.toLowerCase() === val.toLowerCase()
    );

    // Reset to show all branches if no city is selected
    if (!val) {
      this.selectedData = [...this.branches];
    }
  }
}

Corrected Template Code (show-branches.component.html) #

<!-- Added an "All Cities" option for full dataset view -->
<select [(ngModel)]="selected" (ngModelChange)="onSelect($event)">
  <option value="">All Cities</option>
  <option *ngFor="let option of options" [value]="option"> {{ option }} </option>
</select>

<!-- Fixed table structure with proper <table> and <thead> tags -->
<table>
  <thead>
    <tr>
      <th>Branch ID</th>
      <th>IFSC Code</th>
      <th>Branch Name</th>
      <th>Address</th>
      <th>City</th>
      <th>District</th>
      <th>State</th>
    </tr>
  </thead>
  <tbody>
    <!-- Note: Angular doesn't have a built-in `orderBy` pipe. If you're using a custom one, ensure it's properly imported. -->
    <tr *ngFor="let branch of 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>
</table>

Additional Notes #

• OrderBy Pipe: Angular doesn't include a native orderBy pipe. If you're using a third-party pipe (like ngx-order-pipe), make sure it's installed, imported, and configured correctly. Alternatively, handle sorting directly in your component (e.g., when fetching data or in the onSelect method) for better performance.
• Data Validation: Double-check that your ShareService returns branch data with a city field (spelled correctly, matching what you're filtering against).
• Performance: For large datasets, consider using RxJS operators (like filter and map) in your service subscription instead of array methods in the component, to avoid re-filtering the entire array on every selection.

内容的提问来源于stack exchange，提问作者iamcoder