如何显示 select (Angular material 7) 下的选项？

Question

如何在select (Angular material 7) 下显示选项？

类似于默认 select:

Answer 1

您从中获取屏幕截图的文档非常全面地概述了如何包含此组件，只需确保按

<>

在创建它的代码示例的右上角。如果它是特定的东西，你正在努力解决 post 你遇到的错误

https://material.angular.io/components/select/overview

Answer 2

"correct" 答案是在你的垫子上使用 disableOptionCentering-select，但即使这样也只能防止占位符被覆盖而不会模仿基本的原生 select.

<mat-select placeholder="Favorite food" disableOptionCentering>

强烈反对对 Angular 中的本机元素进行 DOM 操作，但不幸的是，这是我发现的执行此类操作的唯一方法...

希望有人会 post 一个真正的 "Angular" 方法来做这种我发现自己正在为这些操作 material 库各种原因。

您需要使用 div 包装器包装您的选项并分配一个 templateRef #matOptionDiv 以便您可以在组件中使用它来获取选项放置的父元素下面是 CDK 覆盖层。

<div #matOptionDiv>
   <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
   </mat-option>
</div>

然后使用 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)
  }

这是一个非常 "hacky" 的解决方案，但并不完美，希望有人会 post 对这个问题给出真正的 "Angular" 解决方案。

不幸的是，在 mat-select 的源代码中进行了计算，以编程方式定义叠加层的顶部基于 _calculateOverlayOffsetY 的可视区域... none 暴露在 API 中，所以我我无法操纵它 "correctly" 我担心 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 操作在 angular 中是可以接受的，只要您使用 Renderer2，因为它与 DOM 适配器接口，并且更新 DOM "appropriately"... 使 DOM 更改平台独立。

请参考此 YouTube 视频了解更多信息。

Can't Touch This! What not to do to the DOM by 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');
    });
  }

如何显示 select (Angular material 7) 下的选项？

How to show options under select (Angular material 7)?

html-select

angular-material2

angular

angular-material-6