Angular中WS获取城市正常但筛选时数组为空问题求助

Hey there! Let's figure out why your cities array goes empty when you use other filters. Based on the code snippets you shared, here are some common issues to check and practical fixes:

1. Verify Data Loading & Assignment Timing #

First, double-check how you're fetching and assigning city data from your Web Service in ngOnInit:

• Make sure you're correctly assigning the fetched data to this.cities in the subscription callback. For example:

  this.yourCityService.getCities().subscribe(response => {
    this.cities = [...response.data]; // Spread operator ensures we copy the data, not just reference it
    console.log('Loaded cities:', this.cities); // Confirm data comes through here
  });
  

• If your filter logic runs before the WS request completes, this.cities will still be empty. Move any filter initialization code inside the subscription callback, or use async/await to ensure data loads first.

2. Don't Modify the Original Cities Array #

It's easy to accidentally overwrite your original city data when filtering. Instead, store a copy of the full dataset:

• Add a separate property to hold the unfiltered cities:

  originalCities: City[] = []; // New property for raw, unfiltered data
  cities: City[] = []; // For filtered display
  

• When loading data, populate both properties:

  this.yourCityService.getCities().subscribe(response => {
    this.originalCities = [...response.data];
    this.cities = [...this.originalCities]; // Start with the full dataset
  });
  

• Now, when filtering, always use originalCities as the source to avoid emptying your main data pool:

  filterCities(filterValue: string) {
    this.cities = this.originalCities.filter(city => 
      city.name.toLowerCase().includes(filterValue.toLowerCase())
    );
  }
  

3. Check for Accidental Resets in Form Control Logic #

Your city_id FormControl and other form fields might have unintended side effects:

• Look for any valueChanges subscriptions on other form controls (like client_name or email) that might be resetting this.cities or overwriting it with an empty array.
• Make sure you're not accidentally setting this.cities = [] in any form-related event handlers.

4. Debug with Console Logs #

The quickest way to pinpoint when the array empties is to add logs at key points:

• Log this.cities right after fetching from the WS.
• Log it before and after your filter runs.
• Check the browser console to see exactly when the array goes from populated to empty—this will tell you which piece of code is causing the issue.

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