typescript 筛选下拉式值以移除已选取的值

yacmzcpb  于 2022-12-14  发布在  TypeScript
关注(0)|答案(1)|浏览(109)

我正在尝试创建一个逻辑来过滤Angular 表单中三个下拉列表中的一个列表中的值。场景:有3个下拉菜单X、Y和Z

  • X中的选项:果汁、奶昔
  • Y轴选项:中糖,普通
  • Z中的选项:香蕉、杏仁、木瓜

在这3个下拉列表旁边有一个添加按钮,它将把选定的值推到下面的网格中。每当用户进行选择时,第三个下拉列表“Z”都应进行过滤,以确保不会创建重复的条目。
假设用户选择这些值并将其添加到网格中,例如:

  • X -〉果汁
  • Y -〉中糖
  • Z -〉香蕉下一次当用户选择相同的值'X'和'Y','香蕉'不应该作为一个选项在下拉'Z'。如果用户选择了一个不同的值在'Y'下拉,那么'香蕉'将出现一个。

数据将被添加到“角材”表的数据源中,每当删除一行时,该选项应被推回到下拉菜单“Z”中
这基本上是为了避免重复。
包络:Angular 14
先谢谢你。

4ioopgfo

4ioopgfo1#

筛选所有组合以匹配前两个选择。从剩余的组合中获取所有已使用的选择。筛选z下拉选项,使其不包括该组合的任何已使用的选择。

// Dropdown options
let x = ['Juice', 'Milkshake'];
let y = ['Medium Sugar', 'Regular'];
let z = ['Banana', 'Almond', 'Papaya'];

// Previously selected options
let rows = [
    {x: 'Juice', y: 'Medium Sugar', z: 'Banana'},
    {x: 'Juice', y: 'Medium Sugar', z: 'Papaya'},
    // More selections...
]

// Selected from dropdown
let selectedX = 'Juice';
let selectedY = 'Medium Sugar'

// Get already used z selections for the previous two selections
let usedZs = rows.filter(row => row.x === selectedX && row.y === selectedY).map(row => row.z);
// ['Banana', 'Papaya']

// Remove used options from z
let newZ = z.filter(option => ! usedZs.includes(option));
// ['Almond']
console.log(newZ)

我猜您可能希望对“y”选择做同样的事情,或者处理选择顺序不对的情况,这会稍微复杂一些。

相关问题