层叠采用了棱角分明4打字稿

Question

下拉表我新的角度和发展我使用的第一个应用的角度4和打字稿

我想用angular4

目前使用级联下拉表中，我一直在努力，但是当我从第一行改变下拉时，它是所有行的绑定第二级下拉菜单。

我想从第一级下拉行的第二级下拉行为更改。

我有一些想法在我的脑海中实现这一点，但我想这可能是一个补丁，所以我很好奇知道任何适当的角度来实现这一点。

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）。 您可能可以将原先的问题应用于您的代码。

列表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调整

• 更新时间：this exchange后与@GünterZöchbauer：
• 使用（ngModelChange）以上（其他城市）

---

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

Fixed Plunker