在Angular 8中创建一个依赖下拉列表(dependent dropdown)可以通过以下步骤实现:
<select [(ngModel)]="selectedParentValue" (change)="onParentValueChange()">
<option *ngFor="let parent of parentValues" [value]="parent.id">{{ parent.name }}</option>
</select>
<select [(ngModel)]="selectedChildValue">
<option *ngFor="let child of getChildValues()" [value]="child.id">{{ child.name }}</option>
</select>
onParentValueChange() {
// 根据父级下拉列表的选择,更新子级下拉列表的选项
this.selectedChildValue = null; // 重置子级下拉列表的选择
}
getChildValues() {
// 根据父级下拉列表的选择,返回相应的子级选项
// 可以根据selectedParentValue的值从数据源中过滤和获取子级选项
// 返回一个包含子级选项的数组
// 例如:return this.childValues.filter(child => child.parentId === this.selectedParentValue);
}
在上述示例中,父级下拉列表使用ngModel指令绑定到组件类中的selectedParentValue属性,子级下拉列表使用ngModel指令绑定到selectedChildValue属性。当父级下拉列表的值发生变化时,会触发onParentValueChange()方法,你可以在该方法中更新子级下拉列表的选项。
领取专属 10元无门槛券
手把手带您无忧上云