如何将水平滚动添加到垫子自动完成答案

【问题标题】：How to add horizontal scroll to mat autocomplete如何将水平滚动添加到垫子自动完成
【发布时间】：2019-11-28 03:20:16
【问题描述】：

我正在运行 Angular 应用程序，对此我有自动完成功能，我想将水平滚动添加到 mat-option，我尝试应用 css 样式

.cdk-overlay-pane {
  overflow-x: auto;
}

 then applying syle as told in this docuemnt [enter link description here][1] showPanel: boolean

  <mat-option class="CustomerDropDown" showPanel="true" ...

extended question

<mat-form-field >
  <input matInput [matAutocomplete]="auto"  [formControl]="customerFilterControl">
  <mat-autocomplete panelWidth ="450px" #auto="matAutocomplete" [displayWith] = "displayFn" style="width:750px;">
     <mat-option  *ngFor="let customer of filteredOptions | async" [value] ="customer.AccountID + '('+ customer.AccountName + ')'" (click)="onCustomerChange(customer)">
      {{customer.AccountID}} ({{customer.AccountName}})
     </mat-option>
  </mat-autocomplete>
</mat-form-field>

两次尝试都失败了！！

【问题讨论】：

标签： css angular typescript mat-autocomplete

【解决方案1】：

试试下面的 CSS。它对我有用。

::ng-deep .custom-mat-option .mat-option-text {
  overflow: auto;
  text-overflow: unset;
  // color: green;
}

custom-mat-option 是我添加到 <mat-option> 元素中的一个类，用于增加 css 特异性。

Stackblitz

【讨论】：

嗨，克里斯，您的解决方案适用于 Stackblitz，但在我的应用程序中我根本找不到 mat-option-text 类，我在应用程序中被限制只能使用 angular6 。这可能是不同的解决方案是完美的
你使用哪个角材料版本？
它是 "@angular/material": "^6.4.7",
根据来源，Angular Material 6.4.x 中应该有一个mat-option。 (github.com/angular/components/blob/6.4.x/src/lib/core/option/…) 你在 HTML 中使用<mat-option> 元素吗？你能用 HTML 扩展你的问题吗，它显示了mat-autocomplete 的用法？
我确实使用 mat-option 来填充数据，但我没有看到 mat-option-text

【解决方案2】：

HTML

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

TS 文件

import {ChangeDetectionStrategy, Component} from '@angular/core';

/** @title Basic virtual scroll */
@Component({
  selector: 'cdk-virtual-scroll-overview-example',
  styleUrls: ['cdk-virtual-scroll-overview-example.css'],
  templateUrl: 'cdk-virtual-scroll-overview-example.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CdkVirtualScrollOverviewExample {
  items = Array.from({length: 100000}).map((_, i) => `Item #${i}`);
}

CSS

.example-viewport {
  height: 200px;
  width: 200px;
  border: 1px solid black;
}

.example-item {
  height: 50px;
}

并点击此链接 scrolling

【讨论】：