角度材质垫-选择键盘上/下不工作

Question

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

材料模块：

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>

当我按回车垫-选择它打开，但键向上和向下箭头键不工作。

有人能帮上忙吗，因为我漏掉了什么？

Answer 1

听起来像是图书馆的冲突。我不知道这是否会解决你的问题，但我的开发团队在使用角质材料时遇到的一个大问题是，选择键盘导航的垫子突然失效了。我们发现的问题实际上是在角-cli.json文件中。

我们引用了要加载bootstrap.js的脚本，这显然与材料库有某种冲突。在任何地方都没有记录这方面的错误，但是从脚本中删除它恢复了本例中材料选择的键盘导航功能。我们也有jquery，我们不需要lol，所以我试着在那里查找，看看那里是否有什么不合理的地方。也许发布你的棱角-cli.json文件也能帮助我们识别问题。

下面的代码片段是导致我们的问题的原因：

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

Answer 2

当我和引导js一起使用时，我正面临着这个问题。我使用的是引导js v3.3.2，并将其更新为v4.1.2，这解决了使用mat-select的上下箭头键的问题。更新后，您可能需要修复少量的css模式，甚至您也可以更新bootstrap.css。希望这能帮到你！

Answer 3

我也遇到了同样的问题。我升级到引导4.1.3，但仍然没有工作。对我来说，造成这一切的原因是把这种风格放在垫子上-选择。

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

删除它在我的css文件中的所有实例，一切正常工作。