标签: angular-material-8

我正在使用 Angular/Material Autocomplete。加载数据到 Autocomplete 会遇到严重的性能问题，比如渲染需要大约 30 秒，需要 10 多秒才能稳定，数据是从服务器加载的，从服务器接收数据非常快。为了解决这个问题，我使用了 cdkVirtualScroll，在向下滚动到结尾并再次单击文本框后，它在滚动其加载值后加载空弹出窗口。

html

   <mat-form-field>
      <input type="text" placeholder="Pick one" aria-label="Number" matInput [matAutocomplete]="auto">
      <mat-autocomplete #auto="matAutocomplete" (opened)="panelOpened()">
        <cdk-virtual-scroll-viewport itemSize="48" style="height: 240px" minBufferPx="96" maxBufferPx="144">
          <mat-option *cdkVirtualFor="let option of options" [value]="option">
            {{option}}
          </mat-option>
        </cdk-virtual-scroll-viewport>
        </mat-autocomplete>
    </mat-form-field>

TS

export class AppComponent  {
  options: string[] = [];

  @ViewChild(CdkVirtualScrollViewport, {static: true}) viewport: CdkVirtualScrollViewport;

  constructor() {
    for (let i = 0; i < 10000; i++) {
      this.options.push("#"+i);
    }
  }

  panelOpened() {
    if (this.viewport) {
      this.viewport.checkViewportSize();
    }
  }
}

检查前：https : …

在尝试复制我遇到的另一个问题时，我尝试使用StackBlitz进行复制。

但是，Angular Material在StackBlitz上似乎不起作用。...关于我可能做错了什么的任何建议或想法？

https://stackblitz.com/edit/angular-e4qp5q

更新资料

该链接现在处于工作状态。问题是我不包括样式导入。

我在设置屏幕上使用 mat-slide-toggle 来显示各种“这个或那个”选项，例如：

<div class="row">
    <div class="column">
        Automatically adjust display to screen
    </div>
    <div class="column">
        <mat-label>Off&nbsp;</mat-label>
        <mat-slide-toggle formControlName="autoLayout">On</mat-slide-toggle>
        <mat-label>&nbsp;On</mat-label>
    </div>
</div>

<div class="row">
    <div class="column">
        Choose preferred manual layout
    </div>
    <div class="column">                            
        Landscape&nbsp;<mat-slide-toggle formControlName="portrait"></mat-slide-toggle>&nbsp;Portrait
    </div>
</div>

看起来像这样：

请注意，作为 mat-slide-toggle 一部分的“On”的样式与控件外部的 Off/On 的样式略有不同。

有没有什么方法可以在切换开关的左侧和右侧复制内部标签，而不必执行大量 CSS jiggery-pokery（我已经尝试过但失败了）？

在我们的项目中，我们使用了角材料进行开发。我们使用 ::ng-deep覆盖了角度材质样式来自定义 CSS 属性。

使用 ::ng-deep 时，声纳报告中出现“意外的未知伪元素选择器 ::ng-deep”错误。

在 ::ng-deep 团队尝试使用父类（ mat-input-underline.mat-form-field-underline ）和使用 customstyle.scss 文件覆盖属性，但它没有按预期工作。

只是想知道这个问题是否有任何替代解决方案，或者我们是否应该在声纳指标中跳过此规则。有人请就此提出建议吗？

参考

用什么来代替 ::ng-deep

我正在尝试使用此处的说明将Angular 7应用程序升级到Angular 8 。一切顺利，直到最后一步：

ng更新@ angular / material

这将Angular Material软件包更新为8.1.2，但也将@ angular / *软件包升级为一个相当奇怪的不需要的版本：〜9.0.0-next.0

这是有问题的（我不得不摆脱一个非必需的dev依赖关系，该依赖关系要求Angular <= 8），因为我不想超越最新的稳定版本8。

我该如何解决？

我正在使用 Angular 8 和 Angular Material 8。我的应用程序在 AppModule 中有以下代码：

{ provide: MAT_DATE_LOCALE, useFactory: "myFunctionToGetServerLanguageCode" }

其中 myFunctionToGetServerLanguageCode 是一种返回字符串的方法，如“en-US”（基于服务器）。然后，我将这个组件与来自 Angular Material 的 datepicker 和这些特定的提供者：

    providers: [
    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },
    { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS }
],

通过这种方式，我打算：

• 将 moment 与 datePicker 一起使用；
• 使日期选择器使用 utc+0；
• 使用与文化相同的格式；

例如，带有“en-US”的 MAT_DATE_LOCALE：如果我选择 2020 年 4 月 10 日，我预计选择器会显示“04/10/2020”（例如，“L”格式将设置为 MM/DD/YYYY ) 并发出“2020-04-10T00:00:00.000Z”

发生的情况是选择器发出“2020-04-09T23:00:00.000Z”。使用开发人员工具，发出的值是一个时刻，私有属性“_isUtc”设置为 false。

我哪里错了？