«Правильный» ответ - использовать disableOptionCentering на вашем коврике, но даже это только мешает заполнению заполнителя и не имитирует базовый собственный выбор.
<mat-select placeholder="Favorite food" disableOptionCentering>
Настоятельно не одобряется манипулирование DOM нативного элемента в Angular, но, к сожалению, это единственный способ, который я нашел, чтобы делать подобные вещи ...
- Надеюсь, кто-нибудь опубликует настоящий «угловой» способ сделать этот вид
вещи, как я ловлю себя на манипулировании библиотекой материалов для этих
типы причин.
Вам нужно будет обернуть ваши параметры оболочкой div и назначить templateRef #matOptionDiv, чтобы вы могли использовать это в своем компоненте, чтобы получить родительский элемент (элементы) раскрывающегося списка вашего параметра, который является наложением CDK.
<div #matOptionDiv>
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
</div>
Затем используйте событие click для mat-form-field, чтобы вызвать метод в вашем компоненте для выравнивания наложения
<mat-form-field (click)="positionDropDown()">
Затем в вашем компоненте используйте @ViewChild, чтобы получить templateRef
import {Component, ViewChild} from '@angular/core';
@ViewChild('matOptionDiv') _matOptionDiv:any;
Затем создайте свой метод для расчета нового значения top на оверлее и назначьте его ... setTimout необходим для запуска изменения с циклом дайджеста.
positionDropDown(){
let offsetY =
this._matOptionDiv.nativeElement.parentElement.parentElement.style.top
setTimeout(()=>{this._matOptionDiv.nativeElement.parentElement.parentElement.style.top = parseInt(offsetY.slice(0, -2))+40+'px'},0)
}
Это очень "хакерское" решение, и оно не очень красивое, надеюсь, кто-то когда-нибудь опубликует ответ с истинным "угловым" решением этого вопроса.
- К сожалению, в источнике mat-select происходят вычисления для программного определения вершины оверлея
на основе видимой области через
_calculateOverlayOffsetY ... ничего из этого не отображается в API, поэтому я
Я не могу манипулировать этим "правильно", и я боюсь, что манипуляции с DOM могут
будь единственным.
https://github.com/angular/material2/blob/6d7f41739207e469e626963d64e661401629902d/src/lib/select/select.ts#L1154
Вот Stackblitz для вашего обзора.
https://stackblitz.com/edit/angular-nafuur?embed=1&file=app/select-overview-example.ts
Редакция
Я провел еще несколько исследований по этому вопросу, и манипулирование DOM допустимо в угловом режиме, если вы используете Renderer2, поскольку он взаимодействует с адаптером DOM и обновляет DOM "соответствующим образом" ... делая DOM независимой от платформы.
Пожалуйста, обратитесь к этому видео YouTube для получения дополнительной информации.
Не могу потрогать это! Что не делать с DOM от Max NgWizard
Обновление кода Stackblitz ниже
import {Component, ViewChild, ElementRef, Renderer2} from '@angular/core';
@ViewChild('matOptionDiv') _matOptionDiv:ElementRef;
constructor(private renderer: Renderer2) { }
positionDropDown() {
let offsetY = this._matOptionDiv.nativeElement.parentElement.parentElement.style.top;
setTimeout(() => {
// this._matOptionDiv.nativeElement.parentElement.parentElement.style.top = parseInt(offsetY.slice(0, -2))+40+'px'},0)
this.renderer.setStyle(this.renderer.parentNode(this.renderer.parentNode(this._matOptionDiv.nativeElement)), 'top', parseInt(offsetY.slice(0, -2)) + 40 + 'px');
});
}