2017-12-07 6 views
1

は、ここからの例のいずれかを貼り付けコピー:エラー:私はプロパティ 'パイプ' の種類には存在しない '観察可能<any>'

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> 

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); 
    } 

} 

CSS:

.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'.

任意のアイデアなぜですか?

+0

あなたは '.pipe()'で何を達成しようとしていますか?ここにあるドキュメントは、シーケンスをNode.jsストリームに変換する方法であることを示唆しているようです。 https://xgrommx.github.io/rx-book/content/observable/observable_instance_methods/pipe.html – joshrathke

+0

@joshrathke私はチュートリアルに従い、コードをコピーしていますが、それが私として何をすべきかはっきりしていません;まだm一般的にAngularの新しいブランドです。 – TK123

答えて

0

あなただけそのFormControlに発生した値の変化に加入しようとしているように思えます。これを試してください:あなたの意図はここにあるが、これは、少なくともあなたに変更値を吐き出し始めるべきか

this.filteredOptions = this.myControl.valueChanges 
    .subscribe(_Changes => { 
     console.log(_Changes); 
    } 

正確にわかりません。

関連する問題