Angular 4 Autocomplete Material 组件 TypeError：无法读取 null 的属性“valueChanges”

Question

我已在我的 Angular 4 项目之一中成功使用了 Angular Material 自动完成组件。但是在我的新项目中，我遇到了这个错误：

错误类型错误：无法读取 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>

我尝试导入大量组件，但仍然出现错误。

import { Component, OnInit, Input, NgModule } from '@angular/core';
import { ReactiveFormsModule,FormControl, FormsModule } from '@angular/forms';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
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';

编辑：（app.module 和组件完整代码）

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() {

  }
}

Answer 1

感谢 cmets，帮助很大。 现在我修复了声明正确的输入名称。 问题在于缺少（不正确的）输入名称

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