问题描述: 在Angular中,当我们自定义下拉组件时,我们可能会遇到一个问题:当选项更改时,ngModel并不会正确更新。
解决方法: 下面是一个解决该问题的示例代码:
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'custom-dropdown',
template: `
`
})
export class CustomDropdownComponent {
@Input() options: string[];
@Output() optionChange: EventEmitter = new EventEmitter();
selectedOption: string;
onOptionChange() {
this.optionChange.emit(this.selectedOption);
}
}
import { Component } from '@angular/core';
@Component({
selector: 'app-parent-component',
template: `
Selected option: {{selectedOption}}
`
})
export class ParentComponent {
dropdownOptions: string[] = ['Option 1', 'Option 2', 'Option 3'];
selectedOption: string;
onDropdownOptionChange(option: string) {
this.selectedOption = option;
}
}
在上面的示例中,我们通过使用ngModelChange
事件来监测下拉选项的更改,并通过optionChange
输出属性将更改的选项发送到父组件。父组件监听optionChange
事件并更新selectedOption
属性,以便正确显示选择的选项。
希望这个示例能够解决你在自定义下拉组件中遇到的问题。