Question

我是角色的新手，并使用angular 4和typescript

开发我的第一个应用程序

我想使用angular4

在表格中使用Cascading下拉列表

目前，我一直在努力，但当我从第一行更改下拉列表时，它是所有行的绑定二级下拉列表。

我想绑定从第一级下拉的行的第二级下拉列表更改。

我有一些想法可以达到这个目的，但我想这可能是一个补丁，所以我很想知道任何正确的角度来达到这个目的。

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中）。您可以在原始问题中将其应用于您的代码。

list-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);
  }
}

list-component.html调整

更新： {@ 3}} @GünterZöchbauer：
使用（ngModelChange）over（change）

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

this exchange

Answer 2

我也遇到了这个问题，最后得到了使用自定义管道的解决方案。

在外部文件中创建过滤器，例如 - mycustomfilter.ts

mycustomfilter.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'myCustomFilter',
    pure: false
})
export class myCustomFilterPipe implements PipeTransform {

  transform(items: any[], field : string, value): any[] {
    if (!items) return [];
    if (!value || value.length === 0) return items;
    return items.filter(it =>
    it[field] === value);
  }
}

应用模块中的

声明

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ App, myCustomFilterPipe],
  bootstrap: [ App ]
})

item-order.component.ts

categoryList=[{id:1,name:'Office Stationery'},
              {id:2,name:'Grocery'}
        ];
itemList=[
         {id:1,name:'Pen',categoryID:1},
         {id:2,name:'A4 Peper',categoryID:1},
         {id:3,name:'Oil',categoryID:2},
         {id:4,name:'Sugar',categoryID:2}
    ];

item-order.component.html

<tr *ngFor="let order of o.controls; let i = index" [formGroup]="order" class="form-row">
              
<td>
<select class="form-control" formControlName="ItemCategoryID">
<option value="">Select</option>
<option *ngFor="let s of categoryList" [ngValue]="s.id">{{s.name}}</option>
</select>
</td>
<td>
<select class="form-control" formControlName="ItemID">
<option value="">Select</option>
<option *ngFor="let s of itemList | myCustomFilter : 'categoryID' : order.value.ItemCategoryID" [ngValue]="s.id">{{s.name}}</option>
</select>
</td>
</tr>

使用Angular 4打字稿在表中级联下拉

2 个答案: