Отрегулируйте высоту выпадающего меню Angular7 автозаполнения с помощью виртуальной прокрутки - PullRequest
Новая
       48

Отрегулируйте высоту выпадающего меню Angular7 автозаполнения с помощью виртуальной прокрутки

0 голосов
/ 04 апреля 2019

Я использую автозаполнение углового материала (версия 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%;
}

ВВиртуальный класс прокрутки Я должен добавить фиксированную высоту.Когда высота элементов меньше 350px, это создаст пустое пространство.

Это скрипка: https://stackblitz.com/edit/angular-fs4voi. Так как я совершенно новичок в Angular, и я сделал некоторые модификации для автозаполнения,это может вызвать и эту проблему.

Большое спасибо!

1 Ответ

0 голосов
/ 05 апреля 2019

Вы можете использовать опцию class на mat-autocomplete, чтобы указать стиль для раскрывающейся панели.Поскольку панель находится в наложении, класс должен быть в вашем глобальном стиле.А для 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>

Global style.css 

.single-autocomplete {
    max-height: 350px !important;
}

https://stackblitz.com/edit/angular-jngfv7?embed=1&file=src/styles.css

...