角度材质:自动完成,自定义过滤器错误

该错误存在于ts文件中,其中包含: "filteredCities = this.cityControl..."在ngOnInit中.(见下文)

但我真的不明白错误是什么意思.对不起,如果这可能是一个noobish问题.我仍然没有在互联网上找到答案.我错过了什么？我对理解这个问题很感兴趣.

这是我的文件: input-form.component.html

  
Informations de l'en-tête
    

      Commune
        

          
            
          

          
            
              {{ city }}
            
          
        
       
     

和我的ts档案:

import {Component, OnInit } from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';

import {Subject} from 'rxjs/Subject';
import {Observable} from 'rxjs/Observable';
import {startWith} from 'rxjs/operator/startWith';
import {map} from 'rxjs/operator/map';

import { City } from '../../city';
import {CitiesService} from '../../data/cities.service';

@Component({
  selector: 'app-input-form',
  templateUrl: './input-form.component.html',
  styleUrls: ['./input-form.component.css']
})
export class InputFormComponent implements OnInit {
  toggle = false;
  reportDataForm: FormGroup;
  participantDataForm: FormGroup;
  citiesListInput: string[];

  cityControl: FormControl = new FormControl();
  filteredCities: Observable;

  constructor(private citiesSvc: CitiesService) { }

  ngOnInit() {
    // Create an object that contains the data from the form and control the input
    this.reportDataForm = new FormGroup({
        'city': new FormControl(null, [Validators.required]),
    });   

    this.filteredCities = this.cityControl.valueChanges
      .pipe(
        startWith(''),
        map(val => this.filter(val))
      );
  }

  displayCities() {
    this.citiesListInput = this.citiesSvc.citiesList;
  }

  filter(val: string): string[] {
    return this.citiesSvc.citiesList.filter(city =>
      city.toUpperCase().indexOf(val.toUpperCase()) === 0);
  }

这是我的服务,后来将连接到数据库.现在它只是一个列表:

import {Injectable} from '@angular/core';

@Injectable()
export class CitiesService {

  citiesList = ['AFFOUX', 'LYON', 'DARDILLY', 'ATOOINE', 'AMELOTT'];

}

版本:

 "typescript": "~2.4.2"
 "rxjs": "^5.5.2"

Linpter.. 5

我发现了这个问题.我输入map和startWith时出错.我使用IDE Webstorm的自动导入,这是错误的.

而不是

import {startWith} from 'rxjs/operator/startWith';
import {map} from 'rxjs/operator/map';

你必须使用

import {startWith} from 'rxjs/operators/startWith';

import {map} from 'rxjs/operators/map';

是的,它只是在操作员身上错过了一个"s",它就像那样简单.

我发现了这个问题.我输入map和startWith时出错.我使用IDE Webstorm的自动导入,这是错误的.

而不是

import {startWith} from 'rxjs/operator/startWith';
import {map} from 'rxjs/operator/map';

你必须使用

import {startWith} from 'rxjs/operators/startWith';

import {map} from 'rxjs/operators/map';

是的,它只是在操作员身上错过了一个"s",它就像那样简单.