Angular Material垫选择键盘向上/向下不起作用答案

【问题标题】：Angular Material mat-select keyboard up/down not workingAngular Material垫选择键盘向上/向下不起作用
【发布时间】：2018-08-13 09:43:11
【问题描述】：

Angular 材质库在我的项目中作为一个模块使用。我也使用了其他几个角材料组件，但这似乎是自动完成选项和选择组件选项的问题。

材料模块：

import { NgModule } from '@angular/core';
import {
  MatAutocompleteModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatExpansionModule,
  MatFormFieldModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule,
  MatStepperModule,
} from '@angular/material';
import { MatNativeDateModule, MatRippleModule } from '@angular/material';
import { CdkTableModule } from '@angular/cdk/table';
import { A11yModule } from '@angular/cdk/a11y';
import { OverlayModule } from '@angular/cdk/overlay';
import { PlatformModule } from '@angular/cdk/platform';
import { ObserversModule } from '@angular/cdk/observers';
import { PortalModule } from '@angular/cdk/portal';

@NgModule({
  exports: [
    MatAutocompleteModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatTableModule,
    MatDatepickerModule,
    MatDialogModule,
    MatExpansionModule,
    MatFormFieldModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSlideToggleModule,
    MatSliderModule,
    MatSnackBarModule,
    MatSortModule,
    MatStepperModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatNativeDateModule,
    CdkTableModule,
    A11yModule,
    ObserversModule,
    OverlayModule,
    PlatformModule,
    PortalModule,
  ]
})
export class MaterialModule { }

Package.json：

"dependencies": {
    "@angular/animations": "5.0.4",
    "@angular/cdk": "5.0.0-rc.2",
    "@angular/common": "5.0.4",
    "@angular/compiler": "5.0.4",
    "@angular/core": "5.0.4",
    "@angular/forms": "5.0.4",
    "@angular/http": "5.0.4",
    "@angular/material": "5.0.0-rc.2",
    "@angular/platform-browser": "5.0.4",
    "@angular/platform-browser-dynamic": "5.0.4",
    "@angular/router": "5.0.4",
    "@swimlane/ngx-charts": "7.0.1",
    "angular2-csv": "^0.2.5",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.4.1",
    "d3": "4.9.1",
    "dom-to-image": "2.5.2",
    "intl": "^1.2.5",
    "enhanced-resolve": "3.3.0",
    "moment": "2.13.0",
    "ngx-bootstrap": "2.0.0-beta.9",
    "ngx-uploader": "4.2.1",
    "pdfjs-dist": "2.0.129",
    "rxjs": "5.5.2",
    "tinymce": "4.7.1",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.12"
  },

HTML 文件

<mat-form-field class="w-100">
    <mat-select name="chart-type" (change)="onChangeChartType()" placeholder="Select Type"
                [(ngModel)]="openedCellConfig.type" style="font-size: 14px;" required="true">
        <mat-option *ngFor="let opt of chartOptions" [value]="opt.key">{{opt.value}}</mat-option>
    </mat-select>
</mat-form-field>

当我在 mat-select 上按 Enter 键时，它会打开，但向上和向下箭头键不起作用。

任何人都可以帮助解决我所缺少的内容吗？

【问题讨论】：

可以添加使用mat-select的文件组件文件吗？

标签： angular-material2

【解决方案1】：

这听起来像是图书馆冲突。我不知道这是否能解决您的问题，但我的开发团队在使用 Angular Material 时遇到的一个大问题是垫选择键盘导航突然不起作用。我们发现的问题实际上是在 angular-cli.json 文件中。

我们引用了要加载的 bootstrap.js 脚本，这显然与材质库存在某种类型的冲突。在任何地方都没有记录任何错误，但是从脚本中删除它可以恢复我们案例中材料选择的键盘导航功能。我们也有 jquery，我们不需要 lol 所以我会试着去那里看看，看看那里是否有什么没有意义的东西。也许发布您的 angular-cli.json 文件也可以帮助我们识别问题。

下面的代码 sn-p 是导致我们问题的原因：

"scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ],

【讨论】：

是的，这解决了问题。一旦我从我的 index.html 中删除了 bootstrap cdn 引用，它就开始工作了。有没有办法同时使用它们？

【解决方案2】：

在使用 bootstrap js 时，我遇到了 mat-select 的问题。我使用的是 bootstrap js v3.3.2 并将其更新到 v4.1.2，这解决了使用 mat-select 的向上/向下箭头键的问题。更新后，您可能需要为模态修复一些 css，甚至您也可以更新 bootstrap.css。希望对您有所帮助！

【讨论】：

【解决方案3】：

我遇到了和上面一样的问题。我升级到 bootstrap 4.1.3，但仍然没有任何效果。造成这种情况的原因是 mat-select 上的这种样式。

.mat-select {
    display: contents !important;
}

在我的 css 文件中删除了它的所有实例，一切都按预期工作。

【讨论】：