Angular 4：打字稿双列表框;根据第一个列表框选择过滤第二个列表框项目

Question

我有2个列表框，区域和位置如下。我想要实现的是，如果选择了区域列表框中的区域，则与所选区域匹配的位置将显示在位置列表框中。我是angular2 +的新手，需要你的指导。

以下是我目前的代码;

区域list.compnent.ts

   import { Component } from '@angular/core';
   import { Area } from '../../../shared/area.type';


    @Component({
        selector: 'area-list',
        templateUrl: './area-list.component.html',
        styleUrls: ['./area-list.component.css']
      })


   export class AreaListComponent {
       areas: Area[]; 
       selectedArea: Area = new Area;


constructor() {
    this.areas = [
        { name : "Fire Station 1", Id:1},
        { name: "Fire Station 2",  Id:2 },
        { name: "Fire Station 3",  Id:3 },
        { name: "Fire Station 4",  Id:4 }
    ];   
}

select(area:Area)
{
   this.selectedArea = area;
}

isActive(area:Area)
{
    return this.selectedArea == area;
}   

}

区域list.component.html

 <h4 style="background-color:lightblue" class="list-group-item text-
  center"> Area List </h4>
   <p *ngIf="!areas">No Area Found</p>
   <ul class="list-group">
       <li *ngFor="let area of areas" value="{{area.Id}}" class="mouseOver 
        list-group-item"
        (click)="select(area)" [ngClass]="{mouseOver:!isActive(area), 
        active:isActive(area)}">
           {{area.name}}
        <span style="cursor:pointer;float:right;margin-right:10px" 
      class="glyphicon glyphicon-minus margin-right">
        </span>
        <span style="cursor:pointer; float:right;margin-right:10px" 
        class="glyphicon glyphicon-pencil float">
        </span>
    </li>
</ul>