Question

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

材料模块：

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

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

我们已经引用了要加载的bootstrap.js的脚本，这些脚本显然与材料库存在某种冲突。在任何地方都没有记录错误，但是从脚本中删除它会恢复我们的情况下材料选择的键盘导航功能。我们也有jquery，我们不需要大声笑所以我会尝试看那里，看看有没有什么是没有意义的。也许发布你的angular-cli.json文件也可以帮助我们识别问题。

下面的代码段是造成我们问题的原因：

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

Answer 2

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

Answer 3

我遇到了与上述相同的问题。我升级到Bootstrap 4.1.3，仍然没有任何作用。对我来说，造成这种情况的原因是，这种风格被放在了选择垫上。

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

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

Angular Material mat-select键盘向上/向下不起作用

3 个答案: