反应形式的级联下拉列表

如何解决反应形式的级联下拉列表

我正在尝试以在 angular 11 上运行的反应形式映射级联下拉列表中的数据，这是我的数据结构：

{
"makeCountryDetails": {
"countryData": [
{
"country": {
"country": "FR","name": "France"
},"States": [
{
"state": "GE","name": "Grand Est","cities": [
"Strasbourg"
]
},{
"state": "IF","name": "Ile-de-France","cities": [
"Paris"
]
}
]
},{
"country": {
"country": "DE","name": "Germany"
},"States": [
{
"state": "BW","name": "Baden-Württemberg","cities": [
"Stuttgart"
]
},{
"state": "BV","name": "Bavaria","cities": [
"Munich","Nuremberg "
]
}
]
}
]
},"assemblyCountryDetails": {
"countryData": [
{
"country": {
"country": "US","name": "United States"
},"States": [
{
"state": "NY","name": "New York","cities": [
"Ontario","Albany"
]
},{
"state": "CA","name": "California","cities": [
"San Bernardino"
]
}
]
}
]
}
}

目标是当用户选择一个国家 (change)=onChnageCountry(event.value.target) 事件，该事件的值传递了示例 (DE)，我想用相关状态并基于所选状态填充下拉列表（更改)=onChangeState(event.value.target) 示例（BV）我想用相关数据映射城市下拉列表，截图如下

如何根据给定的数据结构实现这种映射？

非常感谢！