在 Angular 打字稿中,arrays,angular,typescript"/>
时间戳

首页 > 解决方案 > 如何使用 Map 绑定下拉值在 Angular 打字稿中

arrays - 如何使用 Map 绑定下拉值在 Angular 打字稿中

问题描述

我的角度 UI 中有两个下拉列表。一个是Industry一个是Designation。基于此下拉值选择中的任何一个，我需要在另一个名为Description的下拉列表中过滤下拉值

为此，我在打字稿中编码如下

const industryMap: Map<number, Array<number>> = new Map();

industryMap.set(1, [26, 23, 25, 29]);//Automobile
industryMap.set(2, [19, 7, 24, 20, 8, 13, 1, 6, 10, 15]);//Banking
industryMap.set(3, [24, 11, 4]);//FMCG
industryMap.set(4, [22, 12, 16, 17, 18, 21, 27, 28]);//IT
industryMap.set(5, [24, 2, 5]);//Pharma
industryMap.set(6, [14]);//Transport

为了从行业或指定中获取值，我有这样的代码

 scheduleIndustry(event: MatSelectChange) {
     this.industryselected = {
        value: event.value,
         text: event.source.triggerValue
     };

     this.filterSubCatogory(this.industryselected.value);
 }

我在这里面临的一个问题是关注 this.industryMap.get(parentValue); 没有从我的行业地图数组中返回任何值

 filterSubCatogory(parentValue) {
       let subItems = this.industryMap.get(parentValue);
 }

我要过滤的目标下拉列表具有如下值

 subCategories = [
    { name: 'Agency Development Manager',id:1}, 
    { name: 'Assistant Manager',id:2}, 
    { name: 'Automation Testing',id:3}, 
    { name: 'Billing Staff',id:4}, 
    { name: 'Branch Manager',id:5}, 
    { name: 'Business Development Manager',id:6}, 
    { name: 'Collections Officer',id:7}, 
    { name: 'District Manager',id:8}, 
 ];

基于行业选择，一些值适用于子类别列表，为了映射每个行业的适用值，我正在使用行业映射映射表的帮助。

所以简单来说，我在这里试图实现的是，当用户选择说行业价值为1时，需要获取其匹配的行业地图数组值，并且基于该值需要过滤子类别中的项目，并导致我需要的项目绑定到我的描述下拉列表。

我的component.html如下所示

  <mat-form-field appearance="fill">
  <mat-label>Select an Industry</mat-label>
          <mat-select (selectionChange)="scheduleIndustry($event)">
                <mat-option>None</mat-option>
                <mat-option value="1">Automobile</mat-option>
                <mat-option value="2">Banking, Financial Service and Insurance</mat-option>
                <mat-option value="3">FMCG</mat-option>
                <mat-option value="4">Information Technology(IT)</mat-option>
                <mat-option value="5">Pharmaceutical</mat-option>
                <mat-option value="6">Transaport</mat-option>
           </mat-select>
   </mat-form-field>

  <mat-select (selectionChange)="scheduleDesig($event)">
        <mat-option *ngFor="let categ of subCategories" 
              [value]="categ.id">
               {{ categ.name }}
        </mat-option>
   </mat-select>

我如何做到这一点。提前致谢。

标签： arraysangulartypescript

解决方案

我成功了

如果有人正在寻找这个，请检查一下

首先，我需要将我的 html 更改为

         <mat-form-field appearance="fill">
              <mat-label>Select a Job Designation (Optional)</mat-label>
              <mat-select (selectionChange)="scheduleDesig($event)">
                <mat-option *ngFor="let categ of jobDescriptions" [value]="categ.id">
                  {{ categ.name }}
                </mat-option>
              </mat-select>
            </mat-form-field>

然后在我的打字稿文件中，我添加了以下方法

scheduleIndustry(event: MatSelectChange) {
    this.industryselected = {
      value: event.value,
      text: event.source.triggerValue
    };

   //Called new method to filter my mapping array
   this.filterMapping(this.industryselected.value);

}

在 filterMapping() 中，我编写了过滤映射数组的逻辑，如下所示

 filterMapping(parentValue) {
      let filteredMapping = this.industryMap.get(parentValue);
      //Here call to filter my subcategories based on my "filtered result array" is made
      const filterArray = this.filterSubCategories(this.subCategories, filteredMapping);
      //and response binded to my description dropdown 
      this.jobDescriptions = filterArray;
 }

最后是根据我的id过滤我的两个数组的方法

  filterSubCategories(arr1, arr2) {
     const response = arr1.filter(item => arr2.includes(+item.id));

     return response;
  }

跳它对某人有帮助。

推荐阅读