TK1*_*123 5 typescript angular
我正在复制粘贴其中一个例子:
https://material.angular.io/components/autocomplete/overview
HTML:
<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>
Run Code Online (Sandbox Code Playgroud)
TS:
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);
}
}
Run Code Online (Sandbox Code Playgroud)
CSS:
.example-form {
min-width: 150px;
max-width: 500px;
width: 100%;
}
.example-full-width {
width: 100%;
}
Run Code Online (Sandbox Code Playgroud)
但我得到这个错误:
编译失败:'Observable'类型中不存在属性'pipe'.
知道为什么吗?
确保您使用的是最新版本的 rxjs@5.xx 和 Angular。
https://github.com/ReactiveX/rxjs/blob/master/doc/lettable-operators.md
| 归档时间: |
|
| 查看次数: |
13068 次 |
| 最近记录: |