Question

我昨天开始使用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...＆＃34;在ngOnInit。（见下文）

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

以下是我的文件：的输入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">
            <mat-option *ngFor="let city of filteredCities | async" [value]="city">
              {{ city }}
            </mat-option>
          </mat-autocomplete>
        </div>
       </div>
     </form>

和我的 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<string[]>;

  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"

Answer 1

我发现了这个问题。我输入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';

是的，它只是错过了一个＆＃34; s＆＃34;在运营商那里，它就像那样简单。

Answer 2

我担心你的城市名单没有从服务中获取数据。修改此方法

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

在服务中，我希望您有一个城市列表，您想从组件访问。为此，请在您的服务中添加此方法

getCity(){
   return this.cityList;
}

此外，您还必须检查过滤方法

中是否存在val

  filter(val: string): string[] {
      return val ? this.citiesListInput.filter(s => s.toLowerCase().indexOf(val.toLowerCase()) > -1)
      : this.citiesListInput;
  }

这是一个有效的演示https://stackblitz.com/edit/angular-qzmjse

角度材质：自动完成，自定义过滤器错误

2 个答案: