Angular 角度4自动完成材料组件类型错误：无法读取属性'；价值变化'；空的

我已经在我的Angular 4项目中成功地使用了Angular Material autocomplete组件。但在我的新项目中，我遇到了以下错误：

错误类型错误：无法读取null的属性“valueChanges” 在SiteAutoCompleteComponent.webpackJsonp…/../../../../../../src/app/site auto complete/site-auto-complete.component.ts.SiteAutoCompleteComponent.ServiceCallConf

我想我没有导入组件或其他东西，因为我复制了以前的代码，没有任何重大更改

我的代码：

<md-input-container>
  <input mdInput placeholder="Type Domain Name..." [mdAutocomplete]="auto" 
  class="form-control validate filter-input" formControlName="siteURL">
</md-input-container>
<md-autocomplete #auto="mdAutocomplete" md-input-name="autocompleteField" 
required md-input-minlength="2" md-input-maxlength="18"
  md-select-on-match required md-input-minlength="2" [displayWith]="displayFn">
  <md-option *ngFor="let site of sites | async" [value]="site">
    {{ site.SiteURL }}
  </md-option>
</md-autocomplete>

编辑：（应用程序模块和组件完整代码）

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { FormsModule, ReactiveFormsModule,FormControl } from '@angular/forms';
import {MdInputModule,MdAutocompleteModule} from '@angular/material';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { MaterialModule } from '@angular/material';
import 'hammerjs';

import { AppComponent } from './app.component';
import { SiteAutoCompleteComponent } from './site-auto-complete/site-auto-complete.component';
import { SpWebApiService } from './sp-web-api.service';
import { ConfigService } from './utils/config.service';

@NgModule({
  declarations: [
    AppComponent,
    SiteAutoCompleteComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,MdInputModule,MdAutocompleteModule,MaterialModule
  ],
  providers: [SpWebApiService, ConfigService],
  bootstrap: [AppComponent]
})
export class AppModule { }

和我的组件：

import { Component, OnInit, Input, NgModule } from '@angular/core';
import { ReactiveFormsModule,FormControl, FormsModule } from '@angular/forms';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { SpWebApiService } from '../sp-web-api.service';
import { Sites } from '../sites';
import { HttpModule, Http, Response } from '@angular/http';
import 'rxjs/Rx';
import {Observable} from 'rxjs';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/catch';

@Component({
  selector: 'app-site-auto-complete',
  templateUrl: './site-auto-complete.component.html',
  styleUrls: ['./site-auto-complete.component.css']
})
export class SiteAutoCompleteComponent implements OnInit {

  SearchForm: FormGroup;

  private sites: Observable<Sites[]>;
  private filteredSites: Observable<Sites[]>;

  constructor(private spWebApiService: SpWebApiService, private fb: FormBuilder) { 
    this.createForm();

    this.ServiceCallConf();
  }

  ServiceCallConf()
  {
    this.sites = this.SearchForm.get('siteURL').valueChanges
    .debounceTime(400)
    .distinctUntilChanged()
    .do(_ => {
      // if ( this.SearchForm.get('siteURL').value.length > 0)
      //   this.loaderService.display(true);
      // else
      //   return false;
    })// .do(_ => this.loading = true)
    .switchMap(searchTerm => this.filterSites(searchTerm)) //switchMap automatically unsubscribes from any previous observable when a new event comes down the stream.
    .do(_ => 
      {
        // this.loaderService.display(false);// this.loading = false; 
        console.log(this.sites); 
        // console.log(JSON.parse(JSON.stringify(this.Sites || null )));
      })
    .catch(this.handleSiteServiceError);
  }
  private handleSiteServiceError(error: Response) {
    // this.loaderService.display(false);
    return Observable.throw('handleSiteServiceError'); 
  }

  filterSites(val: string) {
    console.log('filterSites starting...' + val);

    if(val=='')
      return;

    this.filteredSites = this.spWebApiService.getSitesByName(val);
    return this.filteredSites;
  }

  selectedSite:Sites;
  displayFn(site: Sites): string {
    this.selectedSite = site;
    console.log(this.selectedSite);
    return site ? site.SiteURL : "";
  }

  createForm() {
    this.SearchForm = this.fb.group({
      country: ['', Validators.required]
    });
  }

  ngOnInit() {

  }
}

从'@angular/core'导入{Component，OnInit，Input，NgModule}；
从'@angular/forms'导入{ReactiveFormsModule，FormControl，FormsModule}；
从“@angular/forms”导入{FormArray、FormBuilder、FormGroup、Validators}；
从“../sp web api.service”导入{spwebapi服务}；
从“../Sites”导入{Sites}；
从'@angular/Http'导入{HttpModule，Http，Response}；
进口“rxjs/Rx”；
从“rxjs”导入{Observable}；
导入'rxjs/add/operator/map'；
导入'rxjs/add/operator/debounceTime'；
导入'rxjs/add/operator/distinctUntilChanged'；
导入'rxjs/add/operator/switchMap'；
导入'rxjs/add/operator/do'；
导入'rxjs/add/operator/startWith'；
导入“rxjs/add/operator/catch”；
@组成部分({
选择器：“应用程序站点自动完成”，
templateUrl:“./site auto complete.component.html”，
样式URL:['./站点自动完成.component.css']
})
导出类SiteAutoCompleteComponent实现OnInit{
搜索形式：FormGroup；
私人场所：可观察；
私人过滤网站：可观察；
构造函数（私有spWebApiService:spWebApiService，私有fb:FormBuilder）{
这个.createForm（）；
this.ServiceCallConf（）；
}
ServiceCallConf（）
{
this.sites=this.SearchForm.get（'siteURL'）.valueChanges
.debounceTime（400）
.distinctUntilChanged（）
.do（=>{
//if（this.SearchForm.get（'siteURL'）.value.length>0）
//this.loaderService.display（true）；
//否则
//返回false；
})//.do（=>this.loading=true）
.switchMap（searchTerm=>this.filterSites（searchTerm））//当流中出现新事件时，switchMap会自动取消订阅任何以前的可观察事件。
.do（=>
{
//this.loaderService.display（false）；//this.loading=false；
console.log（this.sites）；
//log（JSON.parse（JSON.stringify（this.Sites | | null））；
})
.catch（此.handleSiteServiceError）；
}
私有handleSiteServiceError（错误：响应）{
//this.loaderService.display（false）；
返回可观察的.throw（'handleSiteServiceError'）；
}
filterSites（val:string）{
log（'filterSites starting…'+val）；
如果（val=''）
返回；
this.filteredSites=this.spWebApiService.getSitesByName（val）；
返回此.filteredSites；
}
所选地点：地点；
displayFn（站点：站点）：字符串{
this.selectedSite=站点；
console.log（此.selectedSite）；
返回站点？site.SiteURL:“”；
}
createForm（）{
this.SearchForm=this.fb.group({
国家：[''，验证人。必填]
});
}
恩戈尼尼特（）{
}
}

谢谢你的评论，这帮了大忙。 现在我修复了声明正确输入名称的问题。 问题在于缺少（不正确）输入名称

 createForm() {
    this.searchForm = this.fb.group({
      siteURL: ['', Validators.required]
    });
  }

---

谢谢你的评论，它帮助了很多。 现在我修复了声明正确输入名称的问题。 问题在于缺少（不正确）输入名称

 createForm() {
    this.searchForm = this.fb.group({
      siteURL: ['', Validators.required]
    });
  }

---

你能提供你的

组件.ts

，

应用程序模块.ts

和你正在使用的material2版本吗？你好，Nehal，我现在用代码更新了问题。这是我的package.json；“@angular/material”：“^2.0.0-beta.8”，请尝试在出现错误之前记录此。SearchForm。感谢您的帮助。我犯了一个愚蠢的错误，我应该定义siteURL。siteURL:[''，Validators.required]你能提供你的

组件.ts

，

应用程序模块.ts

和你正在使用的material2版本吗？嗨，Nehal，我现在用代码更新了问题。这是我的package.json；“@angular/material”：“^2.0.0-beta.8”，请尝试在出现错误之前记录此。SearchForm。感谢您的帮助。我犯了一个愚蠢的错误，我应该定义siteURL。siteURL:[''，验证程序。必需]