材料自动填充库使用问题

Question

我在material@2.0.0-beta.12＆amp;中遇到使用mat-autocomplete的问题。使用以下所需版本：

1）angular @ 4.4.4，＆amp;

2）@ angular / cli @ 1.5.0-rc.2

我尝试使用此示例代码@ https://stackblitz.com/angular/ynrnqrokppx?file=app%2Fautocomplete-overview-example.ts

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';

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

export class State {
  constructor(public name: string, public population: string, public flag: string) { }
}

/**
 * @title Autocomplete overview
 */
@Component({
  selector: 'autocomplete-overview-example',
  templateUrl: 'autocomplete-overview-example.html',
  styleUrls: ['autocomplete-overview-example.css']
})
export class AutocompleteOverviewExample {
  stateCtrl: FormControl;
  filteredStates: Observable<any[]>;

  states: State[] = [
    {
      name: 'Arkansas',
      population: '2.978M',
      // https://commons.wikimedia.org/wiki/File:Flag_of_Arkansas.svg
      flag: 'https://upload.wikimedia.org/wikipedia/commons/9/9d/Flag_of_Arkansas.svg'
    },
    {
      name: 'California',
      population: '39.14M',
      // https://commons.wikimedia.org/wiki/File:Flag_of_California.svg
      flag: 'https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg'
    },
    {
      name: 'Florida',
      population: '20.27M',
      // https://commons.wikimedia.org/wiki/File:Flag_of_Florida.svg
      flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Florida.svg'
    },
    {
      name: 'Texas',
      population: '27.47M',
      // https://commons.wikimedia.org/wiki/File:Flag_of_Texas.svg
      flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Texas.svg'
    }
  ];

  constructor() {
    this.stateCtrl = new FormControl();
    this.filteredStates = this.stateCtrl.valueChanges
      .pipe(
        startWith(''),
        map(state => state ? this.filterStates(state) : this.states.slice())
      );
  }

  filterStates(name: string) {
    return this.states.filter(state =>
      state.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
  }

}

对于上面的代码，我在构造函数中的这行代码中遇到错误：

map(state => state ? this.filterStates(state) : this.states.slice())

错误：

Argument of type '{}' is not assignable to parameter of type 'string'.

以下是package.json依赖项：

"dependencies": {
    "@angular/animations": "~4.4.4",
    "@angular/cdk": "^2.0.0-beta.12",
    "@angular/common": "~4.4.4",
    "@angular/compiler": "~4.4.4",
    "@angular/core": "~4.4.4",
    "@angular/forms": "~4.4.4",
    "@angular/http": "~4.4.4",
    "@angular/material": "^2.0.0-beta.12",
    "@angular/platform-browser": "~4.4.4",
    "@angular/platform-browser-dynamic": "~4.4.4",
    "@angular/router": "~4.4.4",
    "@types/jquery": "^2.0.45",
    "angular2-tooltip": "^3.1.0",
    "angular2-websocket-service": "^0.5.3",
    "core-js": "^2.4.1",
    "jquery": "^3.2.1",
    "material-design-icons": "^3.0.1",
    "ng-auto-complete": "^2.7.14",
    "ng2-stomp-service": "^1.2.2",
    "ng2-toastr": "^4.0.1",
    "queueing-subject": "^0.1.1",
    "rxjs": "^5.0.1",
    "sockjs-client": "1.0.0",
    "stompjs": "^2.3.3",
    "zone.js": "^0.8.12"
  },
  "devDependencies": {
    "@angular/cli": "1.5.0-rc.2",
    "@angular/compiler-cli": "~4.4.4",
    "@types/bootstrap": "^3.3.33",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "angular-ide": "^0.9.22",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "^2.2.2"
  }

由于