Question

我有两个选择框，其值为，

选择Box 1 TS

  projects = [
    {
      key: 1, value: "Project one",
    },
    {
      key: 2, value: "Project two",
    },
    {
      key: 3, value: "Project three",
    }
  ]

HTML以上

<select name="project" (change)="changeProject($event)">
<option *ngFor="let opt of projects" [value]="opt.key">{{opt.value}}</option>
</select>

选择方框2 TS

  propertyCode = [
    {
      key: 101, value: "PC101",
    },
    {
      key: 102, value: "PC102",
    },
    {
      key: 103, value: "PC103",
    }
  ]

HTML以上

<select name="project" (change)="changePropertyCode($event)">
<option *ngFor="let opt of propertyCode" [value]="opt.key">{{opt.value}}</option>
</select>

从下拉菜单1和下拉菜单2中选择任何选项时，我需要为下拉菜单3生成一组新的选项。

例如，

场景1

如果我分别选择了Project Two和PC103两个选择框，那么我需要具有下拉菜单，

  product = [
    {
      key: 123, value: "PC103PROD123",
    },
    {
      key: 456, value: "PC103PROD456",
    },
    {
      key: 789, value: "PC103PROD789",
    }
  ]

场景2

如果我分别选择了Project Three和PC102两个选择框，那么我需要具有下拉菜单，

  product = [
    {
      key: 123, value: "PC102PROD123",
    },
    {
      key: 456, value: "PC102PROD456",
    },
    {
      key: 789, value: "PC102PROD789",
    }
  ]

在这里，您可以看到该值的初始字符分别为PC103和PC102，这将在分别从前两个选择框中选择两个选项时发生变化。

如果我从那些选择框中选择提及的选择，则需要像上面一样生成选项。

正在工作的闪电战 https://stackblitz.com/edit/angular-wjhsun

请帮助我基于对第一选择框和第二选择框选项的选择动态生成第三选择框选项，使用纯角度，打字稿或JavaScript而不使用jquery 。

Answer 1

只需创建一个私有方法即可根据products和selectedProject属性设置seletedProperty数组：

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

@Component({...})
export class AppComponent {

  selectedProject;
  selectedProperty;
  product;

  projects = [
    {
      key: 1, value: "Project one",
    },
    {
      key: 2, value: "Project two",
    },
    {
      key: 3, value: "Project three",
    }
  ]

  propertyCode = [
    {
      key: 101, value: "PC101",
    },
    {
      key: 102, value: "PC102",
    },
    {
      key: 103, value: "PC103",
    }
  ]

  changeProject() {
    this.setProducts();
  }

  changePropertyCode() {
    this.setProducts();
  }

  private setProducts() {
    if ((this.selectedProject === "Project two" && this.selectedProperty === 'PC103') || (this.selectedProject === "Project three" && this.selectedProperty === 'PC102')) {

      let potentialProduct = [
        {
          key: 123, value: `${this.selectedProperty}PROD123`,
        },
        {
          key: 456, value: `${this.selectedProperty}PROD456`,
        },
        {
          key: 789, value: `${this.selectedProperty}PROD789`,
        }
      ]

      this.product = potentialProduct;
    } else {
      this.product = [];
    }
  }

}

然后在您的模板中，将[(ngModel)]和projects下拉列表用于properties：

<select 
  name="project" 
  [(ngModel)]="selectedProject" 
  (change)="changeProject($event)">
  <option 
    *ngFor="let opt of projects" 
    [value]="opt.value">
    {{opt.value}}
  </option>
</select>
<br><br>

<select 
  name="project" 
  [(ngModel)]="selectedProperty" 
  (change)="changePropertyCode($event)">
  <option 
    *ngFor="let opt of propertyCode" 
    [value]="opt.value">
    {{opt.value}}
  </option>
</select>
<br><br>

<select 
  name="project" 
  (change)="changeProductCode($event)">
  <option 
    *ngFor="let opt of product" 
    [value]="opt.key">
    {{opt.value}}
  </option>
</select>

这是您推荐的Working Sample StackBlitz。

Answer 2

Here是指向stackblitz的链接。这可能对您有帮助。

Answer 3

从上述要求看来，您只需要select选项的显示字符串是动态的，并且第三下拉列表中的tag的实际值是固定的。

如果上述情况属实，则可以执行以下操作

您的键值对象数组仅如下所示

var arr = [
    { id: "Racer-101", rank: "1"},
    { id: "Racer-102", rank: "2"},
    { id: "Racer-103", rank: "3"},
    { id: "Racer-104", rank: "4"},
    { id: "Racer-105", rank: "5"},
    { id: "Racer-106", rank: "6"},
    { id: "Racer-107", rank: "7"},
    { id: "Racer-108", rank: "8"},
    { id: "Racer-109", rank: "9"}
];

function moveUp(id) {
  let index = arr.findIndex(e => e.id == id);
  if (index > 0) {
    let el = arr[index];
    arr[index] = arr[index - 1];
    arr[index - 1] = el;
  }
}

function moveDown(id) {
  let index = arr.findIndex(e => e.id == id);
  if (index !== -1 && index < arr.length - 1) {
    let el = arr[index];
    arr[index] = arr[index + 1];
    arr[index + 1] = el;
  }
}
moveDown("Racer-101");
moveUp("Racer-103");
console.log(arr);

您只需要附加选定的字符串[已将其与一个变量绑定]

product = [
  {
    key: 123, value: "PROD123",
  },
  {
    key: 456, value: "PROD456",
  },
  {
    key: 789, value: "PROD789",
  }
]

您用于<select name="project" [(ngModel)]='productString' (ngModelChange)='onOptionsSelected($event)'> <option *ngFor="let opt of product" [value]="opt.key">{{opt.value}}</option> </select>方法的TS代码为

onOptionsSelected(event)

请参见下面的stackblitz实时示例：https://stackblitz.com/edit/angular-vrk9b3

在选择框中动态生成选项

3 个答案: