カスケードは、私は角に新しいですし、角度4 typescriptです

Question

を使用してテーブルにドロップダウン使用して私の非常に最初のアプリケーションを開発し、角度4とtypescriptです

私は現在angular4

使用して表にカスケードドロップダウンを使用したい

、私はそれに取り組んできましたが、最初の行からドロップダウンを変更すると、それはすべての行のバインディングの第2レベルのドロップダウンです。

Iが第1のレベルの行の下に第二のレベルの低下がドロップダウンバインドするが変更されます。

私はこれを達成するために、私の心にいくつかのアイデアを持っているが、私はこれを達成するために、角の任意の適切な方法を知っていることは非常に興味がありますので、それはパッチかもしれませんね。

TSファイルコード

import { Component, OnInit, EventEmitter } from '@angular/core'; 
import { Category } from '../model/Category'; 
import { SubCategory } from '../model/subCategory'; 
import { Partner } from '../model/partner'; 
import { GetdataService } from '../../../../Server/api/Getdata.service'; 
import { Router } from '@angular/router'; 

@Component({ 
    templateUrl: 'UploadFile.component.html' 
}) 
export class UploadFileComponent implements OnInit { 
    AllCategoryList: Category[] = []; 
    AllSubCategoryList: SubCategory[] = []; 
    constructor(private _datatask: GetdataService, private _router: Router) { } 

    onChangeCategory(deviceValue) {   
    if (deviceValue > 0) { 
     this._datatask.getAllSubCategory(deviceValue).subscribe(
     (data: SubCategory[]) => { 
      this.AllSubCategoryList = data; 
     } 
    ); 
     console.log("from component: " + deviceValue); 
    } 
    else 
     { 
     //clear dropdown... 
     this.AllSubCategoryList= [];   
     } 
    } 

    ngOnInit() { 
    this._datatask.getAllCategory().subscribe(
     (data: Category[]) => { 
     this.AllCategoryList = data; 
     } 
    ); 

    this._datatask.getAllPartner().subscribe(
     (data: Partner[]) => { 
     this.AllPartnerList = data; 
     } 
    ); 
    } 
} 

HTMLファイル

<div> 
    <table width="100%" border="1"> 
    <thead>  
     <th>Category</th> 
     <th>SubCategory</th> 
     <th>Partner</th> 
    </thead> 
    <tbody *ngFor="let transaction of transactions"> 
     <tr>  
     <td> 
      <select style="Width:100px;" (change)="onChangeCategory($event.target.value)" > 
      <option value=0>--Select--</option> 
       <option value="{{item.ID}}" *ngFor="let item of AllCategoryList" [ngValue]="item.ID" >{{item.Category}}</option> 
      </select> 
     </td> 
     <td> 
      <select style="Width:100px;"> 
      <option value=0>--Select--</option> 
       <option *ngFor="let item of AllSubCategoryList" [ngValue]="item.ID" >{{item.SubCategory}}</option> 
      </select> 
     </td> 
     <td> 
      <select style="Width:100px;"> 
      <option value=0>--Select--</option> 
       <option *ngFor="let item of AllPartnerList" [ngValue]="item.ID" >{{item.PartnerName}}</option> 
      </select> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

任意のヘルプは高く評価されます。

Answer 1

問題は、あなたが（plunkerにあなたが以下のコメントに記載されている）...状態の配列を必要としています。 おそらく元の質問のあなたのコードに同じことを適用することができます。の@GünterZöchbauerとthis exchange後：

（変化する）を超える利用（ngModelChange）

リスト-component.tsは

• 更新

  export class CountryListComponent { 
  
      states: State[] = [[] as State[],[] as State[],[] as State[]] 
  
      onSelect(value,index) { 
      this.states[index] = this._dataService.getStates(). 
       filter((item)=> item.countryid == value); 
      } 
  } 
  

  リストcomponent.html微調整を微調整します

---

お返事のための

<select [(ngModel)]="selectedCountry[number].id" 
    (ngModelChange)="onSelect($event, number)"> 

Fixed Plunker