Angular 連動するコンボボックス

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html"
})
export class AppComponent {
  selected = 'hamster';
  selectedid = "";
  data = [
    { label: '大型犬', value: 'bigdog', disabled: false , id: '01'},
    { label: '小型犬', value: 'smalldog', disabled: false , id: '01'},
    { label: 'ハムスター', value: 'hamster', disabled: false, id: '02'},
    { label: '金魚', value: 'fish', disabled: true , id: '03'},
    { label: '超大型犬', value: 'largedog', disabled: false , id: '01'}
  ];

  lines = { label: '', value: '', disabled: false , id: ''};

  show() {
    for (var keys in this.data) {
       if(this.selected === this.data[keys]["value"]){
        this.selectedid = this.data[keys]["id"];
        break;
      }
    }
    this.lines = {};
    this.datasp = [];

    for (var keys in this.data) {
      if(this.selectedid === this.data[keys]["id"]){
        this.lines.label = "ゴールデン - " + this.data[keys]["label"];
        this.lines.value = this.data[keys]["id"] + "-10";
        this.lines.disabled = false;
        this.datasp.push(this.lines);
        this.lines= {};
      }
    }
  }

  selectedsp;
  datasp;

  showsp() {
    // for (var keyssp in this.datasp) {
    //   console.log('keyssp:' + keyssp + ' value:' + this.datasp[keyssp]["label"]);
    // }
  }
}

app.component.html

<form #myForm="ngForm">
    <select name="animal" [(ngModel)]="selected"  (change)="show()">
     
      <option value="">ペットを選択してください</option>
      <option *ngFor="let item of data"
        [value]="item.value" [disabled]="item.disabled"
        [selected]="item.value === selected">{{item.label}}</option>
    </select>
    <br>
    <br>
    <br>
    <select name="spieces" [(ngModel)]="selectedsp"  (change)="showsp()">

      <!--リストボックスの生成-->  
        <option value="">種類を選択してください</option>
        <option *ngFor="let item of datasp"
          [value]="item.value" [disabled]="item.disabled"
          [selected]="item.value === selected">{{item.label}}</option>
      </select>

  </form>

画面表示
最初のコンボを選択すると選択された行のidが一致するもののみで
次のコンボも作成している。

最初のコンボにひもづくJSONへ連動するコンボの情報も持っておけば
連動した動作が可能と考えている。