我正在为我的应用程序使用角度材料自动完成(版本 7)。我在<cdk-virtual-scroll-viewport>
里面使用。除了我解决的许多问题之外,还有一个我不明白:
当我添加 max-height 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%;
}
在虚拟滚动类中,我必须添加一个固定高度。当项目的高度小于 350px 时,它会创建一个空白区域。
这是小提琴:https ://stackblitz.com/edit/angular-fs4voi 。由于我对 Angular 完全陌生,并且我对自动完成进行了一些修改,因此也可能导致此问题。
非常感谢!