Angular 4实现联动下拉框：根据省份选择加载对应城市

Hey there! Let's get that cascading province-city dropdown working in Angular 4 with Angular Material. Based on your code snippet, here's a complete, step-by-step solution:

1. Define Data Models #

First, let's create interfaces to structure our province and city data consistently:

// province-city.model.ts
export interface City {
  id: number;
  name: string;
  provinceId: number; // Links city to its parent province
}

export interface Province {
  id: number;
  name: string;
}

2. Component Logic (TypeScript) #

In your component class, we'll handle fetching data from the server and the cascading filter logic:

// your-component.component.ts
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Province, City } from './province-city.model';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  provinces: Province[] = [];
  filteredCities: City[] = [];
  selectedProvinceId: number | null = null;

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    // Fetch provinces from your server endpoint
    this.http.get<Province[]>('/api/provinces').subscribe(provinces => {
      this.provinces = provinces;
    });
  }

  onProvinceSelected(): void {
    if (this.selectedProvinceId) {
      // Option 1: Fetch cities dynamically for the selected province (recommended)
      this.http.get<City[]>(`/api/provinces/${this.selectedProvinceId}/cities`)
        .subscribe(cities => {
          this.filteredCities = cities;
        });

      // Option 2: If you fetched all cities upfront, filter locally instead:
      // this.filteredCities = this.allCities.filter(city => city.provinceId === this.selectedProvinceId);
    } else {
      // Clear cities if no province is selected
      this.filteredCities = [];
    }
  }
}

3. Template (HTML) #

Update your template to include the dropdowns inside your existing mat-tab-group:

<!-- your-component.component.html -->
<mat-tab-group>
  <mat-tab label="Basic Info">
    <ng-template mat-tab-label>
      <div fxLayout="center center">
        <mat-icon style="font-size: 16px; line-height: 18px">gps_fixed</mat-icon>
        State
      </div>
    </ng-template>

    <!-- Add your form container with padding/gaps -->
    <div class="form-controls" fxLayout="column" fxLayoutGap="16px" style="padding: 16px;">
      <!-- Province Dropdown -->
      <mat-form-field appearance="fill">
        <mat-label>Select Province</mat-label>
        <mat-select [(ngModel)]="selectedProvinceId" (selectionChange)="onProvinceSelected()">
          <mat-option [value]="null">-- Choose a Province --</mat-option>
          <mat-option *ngFor="let province of provinces" [value]="province.id">
            {{ province.name }}
          </mat-option>
        </mat-select>
      </mat-form-field>

      <!-- City Dropdown -->
      <mat-form-field appearance="fill">
        <mat-label>Select City</mat-label>
        <mat-select>
          <mat-option [value]="null" *ngIf="!filteredCities.length">
            -- Select a Province First --
          </mat-option>
          <mat-option *ngFor="let city of filteredCities" [value]="city.id">
            {{ city.name }}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>
  </mat-tab>
</mat-tab-group>

Important Setup Checks #

• Angular Material Modules: Make sure you've imported these modules in your app/feature module:

  import { MatTabsModule } from '@angular/material/tabs';
  import { MatSelectModule } from '@angular/material/select';
  import { MatFormFieldModule } from '@angular/material/form-field';
  import { MatOptionModule } from '@angular/material/core';
  import { MatIconModule } from '@angular/material/icon';
  
  @NgModule({
    imports: [
      // ... other imports
      MatTabsModule,
      MatSelectModule,
      MatFormFieldModule,
      MatOptionModule,
      MatIconModule,
      FormsModule, // Required for ngModel
      HttpClientModule // Required for HTTP calls
    ]
  })
  export class YourModule { }
  

• API Endpoints: Replace /api/provinces and /api/provinces/{id}/cities with your actual server endpoints.

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