错误：“Observable<any>”类型上不存在属性“管道”答案

【问题标题】：Error: Property 'pipe' does not exist on type 'Observable<any>'错误：“Observable<any>”类型上不存在属性“管道”
【发布时间】：2022-02-15 21:33:18
【问题描述】：

我从这里复制粘贴其中一个示例：

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

但我收到此错误：

编译失败：“Observable”类型上不存在属性“管道”。

知道为什么吗？

【问题讨论】：

您到底想用.pipe() 完成什么？这里的文档似乎表明该方法是将序列转换为 Node.js 流的方法？ xgrommx.github.io/rx-book/content/observable/…
@joshrathke 我只是按照教程并复制代码，不知道应该做什么，因为我对 Angular 来说仍然是全新的。

标签： angular typescript

【解决方案1】：

请检查 RxJS 版本兼容性。

正如我确实浏览了您的代码并发现正确且有效。请看对于version of RxJS should be > 5.5

【讨论】：

【解决方案2】：

确保您使用的是最新版本的 rxjs@5.x.x 和 angular。

https://github.com/ReactiveX/rxjs/blob/master/doc/lettable-operators.md

【讨论】：

【解决方案3】：

我在您的代码中发现了问题，即

myControl: FormControl = new FormControl();

从此行中删除“FormControl”。实际上，您正在定义它的“类型”，但“新 FormControl（）”不存在，我想知道为什么“tslint”没有在您的代码中给出错误。无论如何再看https://material.angular.io/components/autocomplete/overview，这里的角度也没有像你在这里粘贴的代码那样使用。

【讨论】：

【解决方案4】：

可能是因为版本控制不匹配导致.pipe方法可用

这个对我有用

remove the node modules and reinstall the packages (npm i)

【讨论】：

【解决方案5】：

根据您上面的 cmets，您似乎只是想订阅该 FormControl 上发生的值更改。试试这个：

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

不完全确定您的意图是什么，但这至少应该开始向您吐出更改值。

【讨论】：