如何在angularJS2中使用级联？

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-cascading',
  template: `
    <form [formGroup]="cascadingForm">
      <select formControlName="firstLevel" (change)="onFirstLevelChange()">
        <option value="">请选择一级选项</option>
        <option *ngFor="let option of firstLevelOptions" [value]="option">{{ option }}</option>
      </select>
      <select formControlName="secondLevel">
        <option value="">请选择二级选项</option>
        <option *ngFor="let option of secondLevelOptions" [value]="option">{{ option }}</option>
      </select>
    </form>
  `
})
export class CascadingComponent {
  cascadingForm: FormGroup;
  firstLevelOptions = ['选项1', '选项2', '选项3'];
  secondLevelOptions = [];

  constructor() {
    this.cascadingForm = new FormGroup({
      firstLevel: new FormControl(''),
      secondLevel: new FormControl('')
    });
  }

  onFirstLevelChange() {
    const firstLevelValue = this.cascadingForm.get('firstLevel').value;
    // 根据一级选项的值，设置二级选项的值
    if (firstLevelValue === '选项1') {
      this.secondLevelOptions = ['选项1-1', '选项1-2', '选项1-3'];
    } else if (firstLevelValue === '选项2') {
      this.secondLevelOptions = ['选项2-1', '选项2-2', '选项2-3'];
    } else if (firstLevelValue === '选项3') {
      this.secondLevelOptions = ['选项3-1', '选项3-2', '选项3-3'];
    } else {
      this.secondLevelOptions = [];
    }
    // 重置二级选项的值
    this.cascadingForm.get('secondLevel').setValue('');
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { CascadingComponent } from './cascading.component';

@NgModule({
  declarations: [
    AppComponent,
    CascadingComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }