小编Lin*_*ter的帖子

我是一名开始在 Angular 5 上训练的学生。我想即使在 Angular 2 上我的问题也可能是一样的。

对于一个项目，我目前正在尝试创建一个简单的搜索输入，用户可以在其中写入城市名称，并且该字段将在下面建议一些名称。然后，当用户单击列表中的某个项目时，它将显示在输入中。实际上它的行为应该与谷歌搜索栏非常相似。

这是砰的一声。我想它不会运行得很顺利，因为我只是放置了正确的文件来理解，而不是我的整个应用程序。

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

<input
     type="text"
     class="form-control"
     id="InputCity"
     [(ngModel)]="searchText"
     formControlName="city"
     (click)="displayCities()">
        <ul class="results">
            <li>
               <a 
                 class="list-group-item"
                 style="cursor: pointer"
                 *ngFor="let city of citiesListInput | filter : searchText"
                 (click)="putIntoField(city)">
                   {{ city }}
                </a>
            </li>
        </ul>

input-form.component.ts（简而言之）：

export class InputFormComponent implements OnInit {
  citiesListInput: string[];

  constructor(private citiesSvc: CitiesService) { }

  //Get list of cities from a service//
  displayCities() {
    this.citiesListInput = this.citiesSvc.citiesList;
  }

  //Should send the city clicked in the list in the input field.// …

我昨天开始使用Material模块进行Angular,特别是使用自定义过滤器创建自动完成输入字段:https://material.angular.io/components/autocomplete/overview

我还是Angular的新手,我在他们的网站上为我的项目申请了这个例子,即使只是在一个新项目中复制/粘贴他们的例子,我也得到了同样的错误:

input-form.component.ts(75,9): error TS2684: The 'this' context of type 'void' is not assignable to method's 'this' of type 'Observable string'

和

input-form.component.ts(76,9): error TS2684: The 'this' context of type 'void' is not assignable to method's 'this' of type 'Observable<{}>'

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

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

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

<form [formGroup]="reportDataForm" (ngSubmit)="onSubmit()">
  <h3>Informations de l'en-tête</h3>
    <div class="form-group row">
      <label for="InputCity" class="col-3 col-form-label">Commune</label>
        <div class="search col-9">
          <mat-form-field>
            <input
            type="text"
            class="form-control"
            id="InputCity"
            matInput [formControl]="cityControl"
            [matAutocomplete]="auto"
            (click)="displayCities()">
          </mat-form-field>

          <mat-autocomplete #auto="matAutocomplete"> …