Angular实现：根据下拉框选中项禁用另一下拉框对应选项组

我正在开发一个包含两个带分组选项且支持多选的下拉框的项目。需求是：当在第一个下拉框中选中某一type组（如type:water中的Wartortle）时，第二个下拉框中整个type:water组需被禁用，同时第一个下拉框仅保留type:water组可用。

数据源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'],
    },
  ];

已完成的部分实现 #

我创建了两个分别对应两个下拉框的数组：

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

当前禁用逻辑（存在问题） #

其中includeTest为选中项字符串数组，我基于它来筛选/禁用选项组，但目前实现有问题：

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

内容的提问来源于stack exchange，提问作者user18067747