我正在尝试使用角材料实现角的级联下拉菜单。
但是我无法采用相应的值。
有人可以帮我吗？
<mat-form-field>
<mat-select [formControl]="country" placeholder="select"
#singleSelect>
<mat-option *ngFor="let country of countries.Countries"
[value]="domain">
{{country.CountryName}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select [formControl]="state"
placeholder="select" #singleSelect>
<mat-option *ngFor="let i=0;let state of countries.Countries"
[value]="domain">
{{state.CountryName[i].states.stateName}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select [formControl]="city"
placeholder="select" #singleSelect>
<mat-option *ngFor="let i=0;let j=0;let city of countries.Countries"
[value]="domain">
{{city.CountryName[i].states[j].CityName}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select [formControl]="municipality"
placeholder="select" #singleSelect>
<mat-option
*ngFor="let i=0;let j=0;k=0;let
municipality of countries.Countries"
[value]="domain">
{{municipality.city.CountryName[i].states[j].Cities[k].MunName}}
</mat-option>
</mat-select>
</mat-form-field>
[
{
"Countries":[
{
"id":0,
"CountryName":"Indonesia",
"States":[
{
"id":0,
"StateName":"Bali",
"Cities":[
{
"id":0,
"CityName":"Denpasar",
"Municipalities":[
{
"id":0,
"MunName":"Mun1"
},
{
"id":1,
"MunName":"Mun2"
},
{
"id":2,
"MunName":"Mun3"
}
]
},
{
"id":1,
"CityName":"Kuta",
"Municipalities":[
{
"id":0,
"MunName":"Mun4"
},
{
"id":1,
"MunName":"Mun5"
},
{
"id":2,
"MunName":"Mun6"
}
]
},
{
"id":2,
"CityName":"Tuban",
"Municipalities":[
{
"id":0,
"MunName":"Mun7"
},
{
"id":1,
"MunName":"Mun8"
},
{
"id":2,
"MunName":"Mun9"
}
]
}
]
},
{
"id":1,
"StateName":"Badgis",
"Cities":[
{
"id":0,
"CityName":"Denpasar",
"Municipalities":[
{
"id":0,
"MunName":"Mun1"
},
{
"id":1,
"MunName":"Mun2"
},
{
"id":2,
"MunName":"Mun3"
}
]
},
{
"id":1,
"CityName":"Andarab",
"Municipalities":[
{
"id":0,
"MunName":"Mun4"
},
{
"id":1,
"MunName":"Mun5"
},
{
"id":2,
"MunName":"Mun6"
}
]
}
]
}
]
},
{
"id":1,
"CountryName":"India",
"States":[
{
"id":0,
"StateName":"Delhi",
"Cities":[
{
"id":0,
"CityName":"Sonipat",
"Municipalities":[
{
"id":0,
"MunName":"Mun1"
},
{
"id":1,
"MunName":"Mun2"
},
{
"id":2,
"MunName":"Mun3"
}
]
},
{
"id":1,
"CityName":"Rohtak",
"Municipalities":[
{
"id":0,
"MunName":"Mun4"
},
{
"id":1,
"MunName":"Mun5"
},
{
"id":2,
"MunName":"Mun6"
}
]
}
]
},
{
"id":1,
"StateName":"Karnataka",
"Cities":[
{
"id":0,
"CityName":"Mangalore",
"Municipalities":[
{
"id":0,
"MunName":"Mun1"
},
{
"id":1,
"MunName":"Mun2"
},
{
"id":2,
"MunName":"Mun3"
}
]
},
{
"id":1,
"CityName":"Hubli",
"Municipalities":[
{
"id":0,
"MunName":"Mun4"
},
{
"id":1,
"MunName":"Mun5"
},
{
"id":2,
"MunName":"Mun6"
}
]
}
]
}
]
}
]
}
]
答案 0 :(得分：1)
我将实现一种解决方案，其中大多数逻辑都在组件中而不是模板中，因为使用所有不同的循环变量很难理解。
我在这里this中向您展示的方法是一种订阅valueChanges的{{1}}属性的方法，然后根据选择的值，为下一个FormControl，例如FormControl。
根据下拉列表显示的值显示下拉列表。意味着如果过滤后的值不可用，则不会显示它们，因此显示了一个下拉列表。
这可能不是实现此目的的最佳方法，但肯定可以完成工作。
注意：我从您的
mat-select对象中删除了周围的[]。 不需要它们。
模板中的关键点：使用countries有条件地显示州，城市和市政输入（基于预先过滤的值，请参阅组件代码）。
*ngIf该组件的关键点：使用<mat-form-field>
<mat-select [formControl]="country" placeholder="Select Country" #countrySelect>
<mat-option *ngFor="let country of countries.Countries" [value]="country.CountryName">
{{country.CountryName}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="statesFiltered && statesFiltered.length">
<mat-select [formControl]="state" placeholder="Select State" #stateSelect>
<mat-option *ngFor="let state of statesFiltered" [value]="state.StateName">
{{state.StateName}}
</mat-option>
</mat-select>
</mat-form-field>
监听更改并过滤要显示的下一个select元素的值。有点丑陋：在每次值更改时重置过滤后的值，以将输入元素隐藏在链的更下方。
valueChanges