Observble.pipe不是函数

Question

我使用VS2017 angular2模板创建了一个项目。我正试图在我的angular2应用程序中使用棱镜/材料。有一个错误

this._control.stateChanges.pipe不是一个函数 在MatFormField.ngAfterContentInit (form.es5.j:327)

看来可观测的管道功能缺失了。这是我的配置问题还是rxjs更新了？这是我的Config：

 "dependencies": {
"@angular/animations": "5.0.0",
"@angular/cdk": "^5.0.0-rc0",
"@angular/common": "5.0.0",
"@angular/compiler": "5.0.0",
"@angular/compiler-cli": "5.0.0",
"@angular/core": "5.0.0",
"@angular/forms": "5.0.0",
"@angular/http": "5.0.0",
"@angular/material": "^5.0.0-rc0",
"@angular/platform-browser": "5.0.0",
"@angular/platform-browser-dynamic": "5.0.0",
"@angular/platform-server": "5.0.0",
"@angular/router": "5.0.0",
"@ngtools/webpack": "1.8.0",
"@types/webpack-env": "1.13.0",
"angular-router-loader": "^0.7.0",
"angular2-template-loader": "0.6.2",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.1",
"awesome-typescript-loader": "3.2.1",
"bootstrap": "3.3.7",
"devextreme": "^17.1.8",
"devextreme-angular": "^17.1.8",
"jquery": "3.2.1",
"raw-loader": "0.5.1",
"reflect-metadata": "0.1.10",
"rxjs": "5.5.2",
"typescript": "2.6.1",
"webpack": "https://registry.npmjs.org/webpack/-/webpack-2.5.1.tgz",
"webpack-hot-middleware": "2.18.2",
"webpack-merge": "4.1.0",
"zone.js": "0.8.12"
}

我发现这个问题不仅发生在材料上，而且所有可以观察到的。

import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

loggedIn = new BehaviorSubject<boolean>(false);

ngOnInit() {
    this.loggedIn.pipe((p) => p);
}

运行时错误：

错误TypeError: this.loggedIn.pipe不是在checkAndUpdateDirectiveInline (app.component.ts?a73a:23) at checkAndUpdateDirectiveInline (core.js:12094) at checkAndUpdateNodeInline (core.js:13597) at checkAndUpdateNode (core.js:13540) at debugCheckAndUpdateNode (core.js:14412) at debugCheckDirectivesFn (core.js:14353) at Object.eval as updateDirectivescheckAndUpdateView (core.js:13507) at callWithDebugContext (core.js:14739)

Answer 1

Per @Richard的评论，只需使用aspnetcore-angular2-通用的

使用VS2017启动项目

Answer 2

错误消息来自这段代码，位于材料2/src/lib/form-field/form-field.的第180行。

// Subscribe to changes in the child control state in order to update the form field UI.
this._control.stateChanges.pipe(startWith(null!)).subscribe(() => {
  this._validatePlaceholders();
  this._syncDescribedByIds();
  this._changeDetectorRef.markForCheck();
});

this._control是从第157行的模板中设置的

@ContentChild(MatFormFieldControl) _control: MatFormFieldControl<any>;

首先要检查的是，您在app.module.ts中导入了app.module.ts吗？

import {MatInputModule} from '@angular/material';
@NgModule({
  imports: [
  ...
    MatInputModule
  ...
]

第二件要检查的是，你是否添加了matInput指令，

<mat-form-field>
  <input matInput placeholder="Input">
</mat-form-field>

如果可以的话，你能把你的模板代码添加到这个问题中吗？