角材のFormControlが* ngForにエラーを起こします

Question

MdAutocompleteコンポーネントを繰り返す*ngForに角材2のコンポーネントを使用します。 しかし、私は次のエラーを取得する：ここで

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. 
    at NgForOf.ngOnChanges (common.es5.js:1689) 
    at checkAndUpdateDirectiveInline (core.es5.js:10724) 
    at checkAndUpdateNodeInline (core.es5.js:12117) 
    at checkAndUpdateNode (core.es5.js:12085) 
    at debugCheckAndUpdateNode (core.es5.js:12715) 
    at debugCheckDirectivesFn (core.es5.js:12656) 
    at Object.View_WorkCardComponent_0.co [as updateDirectives] (WorkCardComponent.html:8) 
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12641) 
    at checkAndUpdateView (core.es5.js:12053) 
    at callViewAction (core.es5.js:12367) 

は、HTML（作業card.component.html）である：

<md-input-container> 
    <input mdInput placeholder="Project" [formControl]="projectCtrl" [mdAutocomplete]="auto" > 
</md-input-container> 
<md-autocomplete #auto [displayWith]="displayFn"> 
    <md-option *ngFor="let project of filteredProjects" [value]="project.name"> 
     {{ project }} 
    </md-option> 
</md-autocomplete> 

そして、ここでは、活字体（ワークcard.component.tsです）：

import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; 
import {Work} from '../../models/work'; 
import {FormControl} from '@angular/forms'; 

@Component({ 
    selector: 'wtc-work-card', 
    templateUrl: './work-card.component.html', 
    styleUrls: ['./work-card.component.scss'] 
}) 
export class WorkCardComponent implements OnInit { 
    @Input() work: Work; 
    @Output() workDeleted = new EventEmitter(); 

    projectCtrl: FormControl = new FormControl(); 
    filteredProjects: any; 
    projects = 
     [ 
      { 
       id: 52342, 
       name: 'Landing Pages' 
      }, 
      { 
       id: 1234, 
       name: 'Maintenance Interface' 
      } 
      , 
      { 
       id: 52342, 
       name: 'TYPO3 Website' 
      } 
     ]; 

    constructor() { 
    } 

    ngOnInit() { 
     this.filteredProjects = this.projectCtrl.valueChanges 
      .startWith(null) 
      .map(project => project && typeof project === 'object' ? project.name : project) 
      .map(name => name ? this.filterProjects(name) : this.projects.slice()); 
    } 

    filterProjects(val: string) { 
     return this.projects.filter(project => new RegExp(`^${val}`, 'gi').test(project.name)); 
    } 

    displayFn(project): string { 
     console.log(project); 
     return project ? project.name : project; 
    } 

    deleteWork(): void { 
     this.workDeleted.emit(); 
    } 
} 

注：私はngOnInitにコメント/コードを削除すると、エラーがなくなっている（もちろん、オートコンプリートが動作しません）

が問題何人を知っています？私はFormControlとReactiveFormControl

MdAutocompleteドキュメントをインポートしていますmodule.tsで ありがとうございます！

Answer 1

asyncパイプを使用しなければならないという問題があります。あなたの非常に高速な応答のための

<md-option *ngFor="let project of filteredProjects | async" [value]="project.name">