web-dev-qa-db-ja.com

Angularマテリアルのオートコンプリートが機能せず、エラーは表示されません

私はオートコンプリートを実装しましたが、エラーはありません。すべて問題はないようですが、何も起こりません。入力フィールドに何かを入力しましたが、アクションが発生していないようで、コンソールには何も表示されません。

HTML

  <form>
    <mat-form-field>
      <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
    </mat-form-field>

    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let n of testValues" [value]="n">
        {{n}}
      </mat-option>
    </mat-autocomplete>
  </form>

TS

import { MatAutocomplete } from '@angular/material/autocomplete';
import { FormControl } from '@angular/forms';
...
public testValues = ['one', 'two', 'three', 'four'];
public myControl: FormControl;
...
constructor() {
    this.myControl = new FormControl();
}

編集：インポートしました

import {MatAutocompleteModule} from '@angular/material/autocomplete';

私のアプリモジュールで。

資料のバージョン-

"@angular/material": "^5.0.0-rc.2",
angulartypescriptautocompleteangular-materialangular-material2
9
Simeon Nakov

_.ts_にフィルターメソッドがありません

myControlvalueChangesを次の方法で購読する必要があります：

_this.myControl.valueChanges.subscribe(newValue=>{
    this.filteredValues = this.filterValues(newValue);
})
_

したがって、フォームコントロールの値が変更されるたびに、次のようなカスタムfilterValues()メソッドを呼び出します。

_filterValues(search: string) {
    return this.testValues.filter(value=>
    value.toLowerCase().indexOf(search.toLowerCase()) === 0);
}
_

したがって、testValues配列をベース配列として使用し、filteredValues配列をHTMLで使用します。

_<mat-option *ngFor="let n of filteredValues" [value]="n">
    {{n}}
</mat-option>
_

フィルタリングは自動ではありません。オプションをフィルタリングするには、カスタムメソッドを使用する必要があります。それが役に立てば幸い

10
Gianluca Paris