使用虚拟滚动调整下拉菜单的高度 Angular7 自动完成
Adjust height of dropdown menu Angular7 autocomplete with virtual-scroll
我正在为我的应用程序使用 angular-material 自动完成(版本 7)。我在里面使用 <cdk-virtual-scroll-viewport>
。除了我已经解决的无数问题,还有一个我不明白:
添加最大高度时下拉菜单不显示css,如果添加高度,它会显示,但高度固定。
这是我的部分代码:
html:
<mat-form-field class="single-select">
<input matInput #singleInput class="single-input layout flex" type="text" [formControl]="selectControl" [matAutocomplete]="auto" (blur)="onBlur()" (focus)="onFocus()">
<mat-autocomplete class="single-autocomplete" #auto="matAutocomplete" [displayWith]="displayFn">
<cdk-virtual-scroll-viewport itemSize="45" minBufferPx="360" maxBufferPx="360" class="virtual-scroll">
<mat-option *cdkVirtualFor="let option of filteredOptions" [class.selected]="option === oldValue" [value]="option" (click)="onSelect(option)">{{option.label}}</mat-option>
</cdk-virtual-scroll-viewport>
</mat-autocomplete>
</mat-form-field>
ts:
export class SingleSelectComponent implements OnInit {
@Input() value;
@Input('options')
set options(value) {
if (value) {
this.filteredOptions = value.slice();
this.data = value;
this.initValue();
}
}
@Output() formValue = new EventEmitter<any>();
@ViewChild('singleInput') singleInput;
selectControl = new FormControl('');
filteredOptions;
oldValue: any;
data: any;
destroy: Subject<boolean> = new Subject<boolean>();
constructor(private appService: AppService,
private translationService: TranslationService) { }
ngOnInit() { this.selectControl.valueChanges.pipe(takeUntil(this.destroy)).subscribe((value)=>{
let valStr = typeof value === 'string' ? value : value.label;
this.filteredOptions = valStr ? this.filter(valStr) : this.data.slice();
this.value = this.selectControl.value;
if(typeof value !== 'string' || value === '') this.formValue.emit(value);
});
}
ngOnDestroy() {
this.destroy.next(true);
this.destroy.unsubscribe();
}
private filter(name: string) {
return this.data.filter(option => this.normalizeInput(option.label).indexOf(this.normalizeInput(name)) >= 0);
}
private normalizeInput(value: string) {
return value.normalize('NFD').replace(/[\u0300-\u036f]/g, "").toLowerCase();
}
initValue() {
let value = this.data.find(option => option.code === this.value.code);
this.selectControl.setValue(value ? value : '');
this.filteredOptions = this.filter(value ? value.label : '');
this.oldValue = value;
}
displayFn(option) {
return option ? option['label'] : '';
}
onSelect(option) {
this.oldValue = option;
this.singleInput.nativeElement.blur();
}
onBlur() {
if(this.selectControl.value) {
let found = this.data.find(option => this.selectControl.value.code === option.code);
if(!found) {
setTimeout(()=> {
this.selectControl.setValue(this.oldValue);
this.filter(this.oldValue.label);
}, 200);
} else {
this.filter(this.oldValue.label);
}
} else {
this.oldValue = null;
this.filteredOptions = this.data;
}
}
onFocus() {
let virtualScrollEl = document.body.getElementsByClassName('virtual-scroll')[0];
if(virtualScrollEl) {
virtualScrollEl.scrollTo(0, 0);
}
}
}
css:
.single-input {
height: 100%;
min-width: 20%;
max-width: 100%;
}
.virtual-scroll {
height: 350px;
overflow-x: hidden;
}
mat-option {
height: 45px;
font-size: 13px;
}
::ng-deep .mat-autocomplete-panel.single-autocomplete {
max-height: 350px;
}
.virtual-scroll ::ng-deep .cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper {
width: 100%;
}
在虚拟滚动中 class 我必须添加固定高度。当项目的高度小于 350px 时,它会创建一个空白 space.
这是 fiddle: https://stackblitz.com/edit/angular-fs4voi。由于我对Angular完全陌生,并且我对自动完成做了一些修改,所以它也可能导致这个问题。
非常感谢!
您可以使用 mat-autocomplete
上的 class
选项来指定下拉面板的样式。因为面板在叠加层中,所以 class 需要采用您的全局样式。而对于max-height
,因为mat-autocomplete也定义了,所以需要!important
覆盖。那么你根本不需要实现自己的虚拟卷轴。
组件:
<mat-autocomplete class="single-autocomplete" #auto="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let option of filteredOptions" [class.selected]="option === oldValue" [value]="option" (click)="onSelect(option)">{{option.label}}</mat-option>
</mat-autocomplete>
全球style.css
.single-autocomplete {
max-height: 350px !important;
}
https://stackblitz.com/edit/angular-jngfv7?embed=1&file=src/styles.css
您可以使用 [style.height] 并在函数中计算高度:
HTML:
<mat-autocomplete #autoPolicy="matAutocomplete" [panelWidth]="'450px'" >
<cdk-virtual-scroll-viewport itemSize="20" [style.height]="caclVSHeight()">
<mat-option *cdkVirtualFor="let policy of filteredPolicies | async" [value]="policy.name">
<span style="font-size: smaller;">{{ policy.name }}</span>
</mat-option>
</cdk-virtual-scroll-viewport>
</mat-autocomplete>
TS:
virtScrollLength: number;
filteredPolicies: Observable<any[]>;
ngOnInit() {
this.filteredPolicies = this.fcPolicy.valueChanges
.pipe(
startWith(''),
map(value => this._filterPolicy(value))
);
}
private _filterPolicy(value: string): any[] {
if (value) {
const filterValue = value.toLowerCase();
const arr = this.policies.filter(pol => pol.name.toLowerCase().includes(filterValue))
this.virtScrollLength = arr.length;
return arr;
} else {
return this.policies;
}
}
caclVSHeight() {
if (this.virtScrollLength > 10) {
return '240px';
} else {
return '120px';
}
}
我正在为我的应用程序使用 angular-material 自动完成(版本 7)。我在里面使用 <cdk-virtual-scroll-viewport>
。除了我已经解决的无数问题,还有一个我不明白:
添加最大高度时下拉菜单不显示css,如果添加高度,它会显示,但高度固定。
这是我的部分代码: html:
<mat-form-field class="single-select">
<input matInput #singleInput class="single-input layout flex" type="text" [formControl]="selectControl" [matAutocomplete]="auto" (blur)="onBlur()" (focus)="onFocus()">
<mat-autocomplete class="single-autocomplete" #auto="matAutocomplete" [displayWith]="displayFn">
<cdk-virtual-scroll-viewport itemSize="45" minBufferPx="360" maxBufferPx="360" class="virtual-scroll">
<mat-option *cdkVirtualFor="let option of filteredOptions" [class.selected]="option === oldValue" [value]="option" (click)="onSelect(option)">{{option.label}}</mat-option>
</cdk-virtual-scroll-viewport>
</mat-autocomplete>
</mat-form-field>
ts:
export class SingleSelectComponent implements OnInit {
@Input() value;
@Input('options')
set options(value) {
if (value) {
this.filteredOptions = value.slice();
this.data = value;
this.initValue();
}
}
@Output() formValue = new EventEmitter<any>();
@ViewChild('singleInput') singleInput;
selectControl = new FormControl('');
filteredOptions;
oldValue: any;
data: any;
destroy: Subject<boolean> = new Subject<boolean>();
constructor(private appService: AppService,
private translationService: TranslationService) { }
ngOnInit() { this.selectControl.valueChanges.pipe(takeUntil(this.destroy)).subscribe((value)=>{
let valStr = typeof value === 'string' ? value : value.label;
this.filteredOptions = valStr ? this.filter(valStr) : this.data.slice();
this.value = this.selectControl.value;
if(typeof value !== 'string' || value === '') this.formValue.emit(value);
});
}
ngOnDestroy() {
this.destroy.next(true);
this.destroy.unsubscribe();
}
private filter(name: string) {
return this.data.filter(option => this.normalizeInput(option.label).indexOf(this.normalizeInput(name)) >= 0);
}
private normalizeInput(value: string) {
return value.normalize('NFD').replace(/[\u0300-\u036f]/g, "").toLowerCase();
}
initValue() {
let value = this.data.find(option => option.code === this.value.code);
this.selectControl.setValue(value ? value : '');
this.filteredOptions = this.filter(value ? value.label : '');
this.oldValue = value;
}
displayFn(option) {
return option ? option['label'] : '';
}
onSelect(option) {
this.oldValue = option;
this.singleInput.nativeElement.blur();
}
onBlur() {
if(this.selectControl.value) {
let found = this.data.find(option => this.selectControl.value.code === option.code);
if(!found) {
setTimeout(()=> {
this.selectControl.setValue(this.oldValue);
this.filter(this.oldValue.label);
}, 200);
} else {
this.filter(this.oldValue.label);
}
} else {
this.oldValue = null;
this.filteredOptions = this.data;
}
}
onFocus() {
let virtualScrollEl = document.body.getElementsByClassName('virtual-scroll')[0];
if(virtualScrollEl) {
virtualScrollEl.scrollTo(0, 0);
}
}
}
css:
.single-input {
height: 100%;
min-width: 20%;
max-width: 100%;
}
.virtual-scroll {
height: 350px;
overflow-x: hidden;
}
mat-option {
height: 45px;
font-size: 13px;
}
::ng-deep .mat-autocomplete-panel.single-autocomplete {
max-height: 350px;
}
.virtual-scroll ::ng-deep .cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper {
width: 100%;
}
在虚拟滚动中 class 我必须添加固定高度。当项目的高度小于 350px 时,它会创建一个空白 space.
这是 fiddle: https://stackblitz.com/edit/angular-fs4voi。由于我对Angular完全陌生,并且我对自动完成做了一些修改,所以它也可能导致这个问题。
非常感谢!
您可以使用 mat-autocomplete
上的 class
选项来指定下拉面板的样式。因为面板在叠加层中,所以 class 需要采用您的全局样式。而对于max-height
,因为mat-autocomplete也定义了,所以需要!important
覆盖。那么你根本不需要实现自己的虚拟卷轴。
组件:
<mat-autocomplete class="single-autocomplete" #auto="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let option of filteredOptions" [class.selected]="option === oldValue" [value]="option" (click)="onSelect(option)">{{option.label}}</mat-option>
</mat-autocomplete>
全球style.css
.single-autocomplete {
max-height: 350px !important;
}
https://stackblitz.com/edit/angular-jngfv7?embed=1&file=src/styles.css
您可以使用 [style.height] 并在函数中计算高度:
HTML:
<mat-autocomplete #autoPolicy="matAutocomplete" [panelWidth]="'450px'" >
<cdk-virtual-scroll-viewport itemSize="20" [style.height]="caclVSHeight()">
<mat-option *cdkVirtualFor="let policy of filteredPolicies | async" [value]="policy.name">
<span style="font-size: smaller;">{{ policy.name }}</span>
</mat-option>
</cdk-virtual-scroll-viewport>
</mat-autocomplete>
TS:
virtScrollLength: number;
filteredPolicies: Observable<any[]>;
ngOnInit() {
this.filteredPolicies = this.fcPolicy.valueChanges
.pipe(
startWith(''),
map(value => this._filterPolicy(value))
);
}
private _filterPolicy(value: string): any[] {
if (value) {
const filterValue = value.toLowerCase();
const arr = this.policies.filter(pol => pol.name.toLowerCase().includes(filterValue))
this.virtScrollLength = arr.length;
return arr;
} else {
return this.policies;
}
}
caclVSHeight() {
if (this.virtScrollLength > 10) {
return '240px';
} else {
return '120px';
}
}