您好,这里是您的代码经过重构的stackblitz.
首先,如果要显示控件的值,则必须将其传递到将其可视化的位置.
应用组件
placeHolder="select district"
[dataList]="['bangalore','chennai','pune']">
placeHolder="select distance"
[dataList]="[100,200,300,400]">
placeHolder="select state"
[dataList]="['karnataka','tamil nadu','mumbai']">
submit
在您的情况下,我已将新输入添加到您的app-common-下拉列表中,称为controlForDisplay,以将所需formControl的引用传递给组件.我还删除了dropdownId,该操作的原因我将在后面解释.
common-dropdown.component.html
class="cs-select cs-skin-border"
tabindex="0">
{{!!controlForDisplay.value ? controlForDisplay.value : placeHolder }}
因此,现在我们要转到common-dropdown.component.html,其中重要的部分是以下行
{{!! controlForDisplay.value吗? controlForDisplay.value:placeHolder}}
现在,通过添加的controlForDisplay输入,我们可以访问包含所需下拉列表默认值的formControl引用,并在存在任何默认值的情况下可视化该控件,或者在表单控件为空时显示占位符.
commpon-dropdown.component.ts
@Component({
selector: 'app-common-dropdown',
templateUrl: './common-dropdown.component.html',
styleUrls: ['./common-dropdown.component.css']
})
export class CommonDropdownComponent {
@Input() placeHolder: string;
@Input() dataList: any;
@Input() controlForDisplay: FormControl = new FormControl()
dropdownOpen = false;
selectClicked(event: any) {
this.dropdownOpen = true
}
selectOption(value: string) {
this.controlForDisplay.patchValue(value)
this.closeDropDown('')
}
closeDropDown(event: any) {
this.dropdownOpen = false;
}
}
这里的主要变化是,我们不使用本机元素,而是通过formControl API(称为补丁值)通过formControl值更新了formControl值,这样做是通过从父组件和当前组件访问的整个窗体进行更新.
ps.
您必须在app.module内部添加CommonModule.
几乎可以解决您的问题.请记住,在使用Angular创建网页而不是使用DOM API时,使用Angular API几乎总是更可取的,我建议您使用Tour of Heroes,这是官方的angular教程.