我有剑道下拉列表
这里是查看代码
<kendo-dropdownlist valueField="id"
textField="name"
[data]="data"
[formControl]="control"
[itemDisabled]="isItemDisabled"
[valuePrimitive]="valuePrimitive"
[filterable]="isFilterChangeObserved"
[popupSettings]="popupSettings"
(click)="onValueTouched()"
(filterChange)="filterChange.emit($event)">
<ng-template kendoDropDownListValueTemplate
let-dataItem>
<ng-container *ngIf="dataItem; else placeholderTemplate"
[ngTemplateOutlet]="customDropDownListValueTemplate ? customDropDownListValueTemplate : defaultDropDownListValueTemplate"
[ngTemplateOutletContext]="{$implicit: dataItem}">
</ng-container>
<app-clear-button *ngIf="dropdownListElement && control.value && control.disabled === false"
[listeningNativeElement]="dropdownListElement.nativeElement"
(clear)="onClear()">
</app-clear-button>
<ng-template #defaultDropDownListValueTemplate
let-dataItem>
{{dataItem.name}}
</ng-template>
<ng-template #placeholderTemplate>
<span class="placeholder">{{placeholder ?? 'Select item'}}</span>
</ng-template>
</ng-template>
<ng-template kendoDropDownListNoDataTemplate>
<div #dropDownListNoDataTemplate>
<ng-content select="[dropDownListNoData]"></ng-content>
</div>
<!-- // NOTE: check if ng-content provided -->
<div *ngIf="!dropDownListNoDataTemplate.childElementCount">No data found</div>
</ng-template>
<ng-template *ngIf="customDropDownListItemTemplate"
kendoDropDownListItemTemplate
let-dataItem>
<ng-container *ngTemplateOutlet="customDropDownListItemTemplate; context:{ $implicit: dataItem }"></ng-container>
</ng-template>
</kendo-dropdownlist>
组件代码
export abstract class DropdownBaseComponent<T extends IDataItem | number | string> {
@Input()
public control!: FormControl;
@Input()
public placeholder: string;
@Output()
public readonly filterChange = new EventEmitter<string>();
@Output()
public readonly valueChange = new EventEmitter<T>();
@ViewChild(DropDownListComponent, { static: true, read: ElementRef })
public dropdownListElement!: ElementRef;
@ContentChild(DropdownListValueTemplateDirective, { static: true, read: TemplateRef })
public customDropDownListValueTemplate!: TemplateRef<DropdownListValueTemplateDirective>;
@ContentChild(DropdownListItemTemplateDirective, { static: true, read: TemplateRef })
public customDropDownListItemTemplate!: TemplateRef<DropdownListItemTemplateDirective>;
public get isFilterChangeObserved(): boolean {
return this.filterChange.observers.length > 0;
}
public readonly popupSettings: PopupSettings = { popupClass: 'h-combobox-popup' };
public valuePrimitive = false;
public isItemDisabled: ItemDisabledFn = () => false;
public onValueTouched(): void {
console.log(this.control);
this.control.markAsTouched();
}
public onClear(): void {
this.control.setValue(null);
}
}
现在当我点击下拉菜单时,它突出显示为红色
我需要突出显示它,只有在未选择值且下拉列表关闭时