Html “自定义材质选择”下拉列表以允许角度中的嵌套值

我正在自定义角度材质选择/自动完成，以允许嵌套下拉列表

在这里，我想让一位家长和许多孩子一起辍学。如果我展开特定的父下拉列表，则只有该下拉列表的子项应该展开或折叠。同样，应在同一场景中选择复选框事件

在这里，当我选择下拉列表时，我得到了[object]

提供控制台日志以给出选择/未选择的值

有人能帮忙吗

浇头
{{states.value？states.value[0]：''}
（++{states.value.length-1}{{{states.value？.length==2？'other'：'others'}）
{{group.letter}}
键盘箭头向下
{{name}}
导出类SelectCustomTriggerExample{
构造函数（私有_formBuilder:formBuilder）{}
//stateForm:FormGroup=this.\u formBuilder.group({
//状态组：“”，
// });
//浇头=新FormControl（）；
isExpandCategory:boolean[]=[]；
排行榜：string[]=['额外的奶酪'、'蘑菇'、'洋葱'、'意大利香肠'、'香肠'、'番茄']；
stateRecord:any=[]；
states=newformcontrol（）；
expandDocumentTypes（组：任意）{
log（“扩展下拉列表”，组）；
this.isExpandCategory[group.letter]=！this.isExpandCategory[group.letter]；
//仅展开包含该子项的选定父项下拉列表类别
}
切换选择（事件：任意、名称：任意、组：任意）{
调试器；
日志（“toggleSelection”，名称，event.checked，组）；
如果（已选中事件）{
log（“stateRecordTelist”，this.stateRecord）；
this.stateRecord.push（名称）；
this.states.setValue（this.stateRecord）；
log（“toggleselection”，this.states.value）；
}否则{
this.stateRecord=this.stateRecord.filter（（x:any）=>x！==name）；
log（“else-toggleselection”、名称、组、this.states.value）；
this.states.setValue（this.states.value.filter（（x:any）=>x！==name））；
log（“在过滤器之后”，this.states.value）；
//此.states.setValue（[]）；
}
}
toggleParent（事件：任意，组：任意）{
调试器；
group.checked=event.checked；
console.log（“event”，event.checked，“group”，group，“states value”，this.states.value）；
让states=this.states.value；
状态=状态？状态：[]；
如果（已选中事件）{
states.push（…group.names）
}否则{
console.log（“else”，状态）；
group.names.forEach（（x:string）=>{
if（表示索引of（x）>-1）{
状态.拼接（状态.索引f（x），1）
}
});
}
此.states.setValue（状态）；
log（“statesvalue”，this.states.value）；
如果（！event.checked）{
this.states.setValue（this.states.value.filter（（x:any）=>！x.includes（group.names）））
//此.states.setValue（[]）；
}
log（“final statesvalue”，this.states.value）；
}
州列表=[{
“信”：“A”，
“checked”：false，
“姓名”：[{
“id”：1，
“类型”：“阿拉巴马”
},
{
“id”：2，
“类型”：“阿拉斯加”
},
{
“id”：3，
“类型”：“亚利桑那州”
},
{
“id”：4，
“类型”：“阿肯色州”
}
]
},
{
“信”：“C”，
“checked”：false，
“姓名”：[{
“id”：8，
“类型”：“加利福尼亚”
},
{
“id”：9，
“类型”：“Colorado”
},
{
“id”：10，
“类型”：“康涅狄格州”
}
]
},
{
“信”：“D”，
“checked”：false，
“姓名”：[{
“id”：18，
“类型”：“特拉华”
},
{
“id”：19，
“类型”：“Denwer”
}
]
}
];
}

预期输出如下所示

---

将您的

toggleParent

函数替换为以下给定值。您还可以在stackblitz中找到解决方案：

---

一次只能选择一个组？不，我们应该在下拉列表值之间进行混合和匹配。选中父项下拉复选框时，应选中所有子项。单击每个复选框后，结果应为所选值的数组。您可以参考此链接。。并查看控制台日志。。此处json响应已更改..有人能告诉我如何在此处自动筛选@UI_dev您需要添加自动完成并在matinput中指定它，如下所示[matAutocomplete]=“auto”谢谢，这里有一些错误..在取消选择父项和子项复选框时。你能帮个忙吗？你能给我一个你发现bug的测试用例吗？其中一个是。。选中“阿拉斯加”复选框，然后选中父复选框。。有重复项请现在检查。它现在可以工作了！谢谢兄弟。还有一件事，我们能在输入框中这样显示特拉华（+3个其他州）吗？现在它在下面。

toggleParent(event: any, group: any) {
  debugger;
  group.checked = event.checked;
  console.log("event", event.checked, "group", group, "states value", this.states.value);
  let states = this.states.value;
  states = states ? states : [];
  if (event.checked) {
    states.push(...group.names.filter((x: any) => !states.includes(x.type)).map((x: any) => x.type))
  } else {
    console.log("else", states);
    group.names.forEach((x: any) => {
      if (states.indexOf(x.type) > -1) {
        states.splice(states.indexOf(x.type), 1)
      }
    });
  }
  this.states.setValue(states);
  console.log("statesvalue", this.states.value);
  if (!event.checked) {
    this.states.setValue(this.states.value.filter((x: any) => !x.includes(group.names)))
    //this.states.setValue([]);
  }
  console.log("final statesvalue", this.states.value);
  this.stateRecord = this.states.value;
}