我在 assets/file.json 中有 json 文件。我使用反应式表单方法。我想在选择部门时在第二个下拉列表中显示详细信息（仅名称）。我已经在第一个下拉列表中显示了部门。但没有看到第二次下降。
[
{
"DEPT": "PHYSICS",
"details": [
{
"id": 164,
"name": "A",
},
{
"id": 265,
"name": "B",
}
]
},
{
"DEPT": "BIOLOGY",
"details": [
{
"id": 155,
"name": "C",
},
{
"id": 234,
"name": "D",
}
]
}
]
我所做的是...
先下拉………………
<select formControlName="dept">
<option value="default">--Select a dept--</option>
<option *ngFor="let d of departments$" [value]="d.DEPT"> {{d.DEPT}} </option>
</select>
第二个下拉......................
<select formControlName="details">
<option value="0">--All--</option>
<option *ngFor="let d of dept.value" [value]="d.details.name"> {{d.details.name}} </option> -->
</select>
我想在选择生物系时显示，第二个下拉菜单应显示名称 C、D。
尝试为您所需的功能编写一个基本的代码片段。试试这个我希望它会帮助你。谢谢
HTML
<select (change)="checkDepart($event.target.value)">
<option value="default">--Select a dept--</option>
<option *ngFor="let d of data; let i = index" [value]="i"> {{d.DEPT}} </option>
</select>
<select *ngIf="visibleDetail">
<option value="0">--All--</option>
<option *ngFor="let d of data[selectedDept].details" [value]="d.name"> {{d.name}} </option>
</select>
TS
visibleDetail: boolean;
selectedDept: number;
data = [
{
"DEPT": "PHYSICS",
"details": [
{
"id": 164,
"name": "A",
}, {
"id": 265,
"name": "B",
}
]
}, {
"DEPT": "BIOLOGY",
"details": [
{
"id": 155,
"name": "C",
}, {
"id": 234,
"name": "D",
}
]
}
]
checkDepart(e) {
this.visibleDetail = true;
this.selectedDept = e;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句