我正在复制粘贴其中一个例子:
https://material.angular.io/components/autocomplete/overview
HTML:
@H_502_15@<form class="example-form"> <mat-form-field class="example-full-width"> <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto"> <mat-autocomplete #auto="matAutocomplete"> <mat-option *ngFor="let option of filteredOptions | async" [value]="option"> {{ option }} </mat-option> </mat-autocomplete> </mat-form-field> </form>TS:
@H_502_15@import {Component} from '@angular/core'; import {FormControl} from '@angular/forms'; import {Observable} from 'rxjs/Observable'; import {startWith} from 'rxjs/operators/startWith'; import {map} from 'rxjs/operators/map'; /** * @title Filter autocomplete */ @Component({ selector: 'autocomplete-filter-example',templateUrl: 'autocomplete-filter-example.html',styleUrls: ['autocomplete-filter-example.css'] }) export class AutocompleteFilterExample { myControl: FormControl = new FormControl(); options = [ 'One','Two','Three' ]; filteredOptions: Observable<string[]>; ngOnInit() { this.filteredOptions = this.myControl.valueChanges .pipe( startWith(''),map(val => this.filter(val)) ); } filter(val: string): string[] { return this.options.filter(option => option.toLowerCase().indexOf(val.toLowerCase()) === 0); } }CSS:
@H_502_15@.example-form { min-width: 150px; max-width: 500px; width: 100%; } .example-full-width { width: 100%; }但我得到这个错误:
Failed to compile: Property ‘pipe’ does not exist on type ‘Observable’.
知道为什么吗?
解决方法
确保您使用的是最新版本的rxjs@5.x.x和angular.
https://github.com/ReactiveX/rxjs/blob/master/doc/lettable-operators.md