Angular中实现条件式下拉菜单：动态加载选项

// app.component.ts
import { Component } from '@angular/core';

interface DropdownOption {
  value: string;
  text: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 控制下拉菜单的数据源
  companies: DropdownOption[] = [
    { value: 'amazon', text: 'Amazon' },
    { value: 'google', text: 'Google' },
    { value: 'apple', text: 'Apple' },
    { value: 'microsoft', text: 'Microsoft' }
  ];

  // 针对Amazon的特定数据
  amazonSpecificData: DropdownOption[] = [
    { value: 'aws', text: 'AWS Services' },
    { value: 'prime', text: 'Prime Membership' },
  ];

  // 通用数据，用于其他公司
  generalData: DropdownOption[] = [
    { value: 'cloud', text: 'Cloud Solutions' },
    { value: 'software', text: 'Software Development' },
    { value: 'hardware', text: 'Hardware Products' },
    { value: 'services', text: 'Consulting Services' }
  ];

  // 选中的公司
  selectedCompany: string | null = null;
  // 受控下拉菜单的当前选项数据源
  dependentDropdownOptions: DropdownOption[] = [];
  // 受控下拉菜单的选中值
  selectedDependentValue: string | null = null;

  constructor() {
    // 初始化时，可以设置一个默认的选项，或者让其为空
    this.updateDependentDropdownOptions();
  }

  /**
   * 根据选中的公司更新受控下拉菜单的选项
   */
  onCompanyChange(): void {
    this.updateDependentDropdownOptions();
    // 当控制下拉菜单改变时，重置受控下拉菜单的选中值，避免数据不一致
    this.selectedDependentValue = null;
  }

  private updateDependentDropdownOptions(): void {
    if (this.selectedCompany === 'amazon') {
      this.dependentDropdownOptions = this.amazonSpecificData;
    } else if (this.selectedCompany) { // 如果选择了其他公司
      this.dependentDropdownOptions = this.generalData;
    } else { // 没有选择任何公司
      this.dependentDropdownOptions = [];
    }
  }
}

<!-- app.component.html -->
<mat-card>
  <mat-card-header>
    <mat-card-title>条件式下拉菜单示例</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <mat-form-field appearance="fill">
      <mat-label>选择公司</mat-label>
      <mat-select [(ngModel)]="selectedCompany" (ngModelChange)="onCompanyChange()">
        <mat-option *ngFor="let company of companies" [value]="company.value">
          {{company.text}}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field appearance="fill" style="margin-left: 20px;">
      <mat-label>相关数据</mat-label>
      <mat-select [(ngModel)]="selectedDependentValue" [disabled]="!selectedCompany">
        <mat-option *ngFor="let option of dependentDropdownOptions" [value]="option.value">
          {{option.text}}
        </mat-option>
        <mat-option *ngIf="dependentDropdownOptions.length === 0 && selectedCompany" disabled>
          无可用选项
        </mat-option>
        <mat-option *ngIf="!selectedCompany" disabled>
          请先选择公司
        </mat-option>
      </mat-select>
    </mat-form-field>

    <div *ngIf="selectedCompany || selectedDependentValue" style="margin-top: 20px;">
      <p>您选择的公司: <b>{{ selectedCompany ? selectedCompany.toUpperCase() : '无' }}</b></p>
      <p>您选择的相关数据: <b>{{ selectedDependentValue ? selectedDependentValue.toUpperCase() : '无' }}</b></p>
    </div>
  </mat-card-content>
</mat-card>