Angular中的自动完成下拉列表(2/4)

时间:2017-09-22 07:54:31

标签: angular autocomplete angular-material angular-material2

我正在使用@angular/material。在文本框中输入后,过滤后的结果不会出现在下拉列表中。

TS

consignmentForm: FormControl = new FormControl();
filteredConsignmentOptions: Observable<string[]>;
options = [
  'One',
  'Two',
  'Three'
]

ngOnInit() {
    this.filteredConsignmentOptions = this.consignmentForm.valueChanges.startWith(null).map(val => val ? this.filter(val) : this.options.slice());
}

filter(val: string): string[] {
   return this.options.filter(option => option.toLowerCase().indexOf(val.toLowerCase()) === 0);
}

HTML

<form>
    <md-form-field >
        <input type="text" placeholder="Pick one" aria-label="Number" mdInput [formControl]="consignmentForm" [mdAutocomplete]="auto">
        <md-autocomplete #auto="mdAutocomplete">
            <md-option *ngFor="let option of filteredConsignmentOptions | async" [value]="option">
                 {{ option }}
            </md-option>
        </md-autocomplete>
    </md-form-field>
</form>

我已经安慰并看到function filter()工作正常,但我的下拉列表没有加载过滤后的结果。请帮忙!

0 个答案:

没有答案