角垫-选择显示选项的数量

Question

我有一个function rolloverImages() { $('.thumbnail-wrapper').one('mouseover', function() { var rollovers = $(this).find('.rolloverimages div'); var time = 0; rollovers.each(function() { setTimeout(function() { var datasrc = $(this).data('hover'); var img = $('<img id="dynamic">'); var imgsrc = img.attr('src', datasrc); var parent = $(this).parent('.rolloverimages').parent('.thumbnail-wrapper'); console.log(parent); }.bind(this), time); time += 2000; }); }); } 元素，其中固定数目的mat-select个元素。要查看最后一个元素，我必须滚动列表。是否可以扩大区域，以便我无需滚动即可查看最后一个元素？

mat-option

[我有什么]

[我想要什么]

谢谢！

解决方案：

我终于用这种方法解决了：

<mat-form-field appearance="outline">
    <mat-select>
        <mat-option [value]="0">Automatically</mat-option>
        <mat-option [value]="10">10</mat-option>
        <mat-option [value]="20">20</mat-option>
        <mat-option [value]="50">50</mat-option>
        <mat-option [value]="100">100</mat-option>
        <mat-option [value]="-1">All</mat-option>
    </mat-select>
</mat-form-field>

和

@Component({
  selector: 'select-value-binding-example',
  templateUrl: 'select-value-binding-example.html',
  styleUrls: ['select-value-binding-example.css'],
  encapsulation: ViewEncapsulation.None
})

与组件相关的.scss文件

Answer 1

添加ViewEncapsulation.None并添加csss以自定义Mat-select

@Component({
  selector: 'select-value-binding-example',
  templateUrl: 'select-value-binding-example.html',
  styleUrls: ['select-value-binding-example.css'],
  encapsulation: ViewEncapsulation.None
})

将此CSS属性添加到您的.mat-select-panel

.mat-select-panel{
  overflow:visible !important;
}

检查此示例：https://stackblitz.com/edit/angular-swkgk4

Answer 2

如果您有固定数量的选项，最简单的方法是猜测所需的高度和：

::ng-deep() .mat-select-panel {
    max-height: <your new height>
}

这样，选择框将清晰地显示所有边框阴影和所有

Answer 3

mat-selector 选项显示在不是组件子项的覆盖 div 中。样式需要在styles.scss 中全局更改。 所以添加你的styles.scss：

python manage.py migrate

这将影响项目中的所有 mat-selector，因此如果您只想将样式应用于一个 mat-selector，请向 mat-selector 添加一个类，并在 style.scss 中为该类定义 CSS。

不建议使用 ViewEncapsulation.None，因为您的所有组件样式都将应用于整个项目，这可能会导致难以跟踪的错误。