angular语言 - 如何禁用一个下拉菜单中基于另一个下拉菜单中选择的选项?

Question

我正在做一个项目，有两个下拉菜单，分组选项和多个选择，这是stackblitz表示。在那里，我试图禁用在一个下拉菜单中选择的整个选项组，当它在另一个下拉菜单中被选中时。但是我遇到了一个问题。

JSON:

items = [
{
type: 'all',
name: ['All Pokemon'],
},
{
type: 'water',
name: [
'Squirtle',
'Wartortle',
'Blastoise',
'Psyduck',
'Golduck',
'Tentacool',
'Seel',
],
},
{
type: 'fire',
name: [
'Charmander',
'Charizard',
'Vulpix',
'Arcanine',
'Ponyta',
'Magmar',
'Cyndaquil',
],
},
{
type: 'earth',
name: ['Growlithe', 'Arcanine', 'Geodude', 'Golem', 'Onix'],
},
];

当我在第一个下拉菜单中从type:water中选择Wartortle时，整个type:water组应该在第二个下拉菜单中禁用，并且在第一个下拉菜单中只有类型:water组应该保持启用。

这是我到目前为止所能做的:

我创建了两个数组(用于2个下拉列表):

this.items.forEach((data) => {
data['disable'] = false;
});
this.arr1 = this.items;
this.arr2 = this.items.filter((x) => x.type !== 'all');

这是我用来禁用它的逻辑:

if (includeTest.length) {
includeTest.map((x1) => {
this.arr1.forEach((y1) => {
if (y1.name.includes(x1)) {
y1.disable = true;
} else {
y1.disable = false;
}
});
this.arr2.forEach((y2) => {
if (y2.name.includes(x1)) {
y2.disable = true;
} else {
y2.disable = false;
}
});
});
} else {
this.arr1.forEach((x) => {
x.disable = false;
});
this.arr1.forEach((x) => {
x.disable = false;
});
}

在这里，includeTest包含字符串数组，我必须过滤掉/禁用选项组。

Answer 1

试着阅读有关Angular Pipes的内容，特别是有关"过滤器"的内容。这里有很多资源，还有Angular的文档。

简单地说，所有的'ngFor'或'ng-repeat'必须通过你的过滤管道过滤。当您从下拉菜单1中选择某些内容时，下拉菜单2上的过滤器将根据下拉菜单1的值填充显示过滤的数据，反之亦然。

if (dropdown1.type == 'water') {dropdown2.items = ...}

或

if (dropdown1.type == 'water' && dropdown1.name == 'Vulpix') {dropdown2.items = ...}

或

<li *ngFor="let item of dropdown2 | callback: filterData">...</li>
filterData(item: Item) {
if (dropdown1.type == 'water' && item == 'your rules') {return item}
}

所以下拉框2的数据总是基于下拉框1