角度材料マット選択キーボードのアップ/ダウンが機能しない

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

これはライブラリの競合のようです。これがあなたの問題を解決するかどうかはわかりませんが、私の開発チームが角度材料を使用したときの大きな問題は、マット選択のキーボードナビゲーションが突然機能しなかったことです。われわれが見つけた問題は、実際にはangular-cli.jsonファイルにありました。

bootstrap.js用のスクリプトを参照していましたが、これは明らかにマテリアルライブラリと何らかのタイプの競合がありました。この場所にはエラーは記録されていませんでしたが、スクリプトからキーボードを削除すると、このケースの材料選択のためのキーボードナビゲーション機能が復元されました。私たちはまたjqueryも持っていましたが、私たちはそれを必要としませんでした。そこで私はそこを見てみると、そこには意味がないものがあるかどうかを調べるでしょう。おそらく、あなたのangular-cli.jsonファイルを投稿すると、問題の特定に役立ちます。

以下のコードスニペットは、私たちの問題の原因である：

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