Angular 角材料'；s FormControl在*ngFor中导致错误

我想在重复组件的

*ngFor

中使用角度材料2的

MdAutocomplete

组件。 但我得到了以下错误：

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（work card.component.HTML）：

注意：当我删除/注释Ngonit中的代码时，错误消失了（当然，自动完成不起作用） 在module.ts中，我正在导入

FormControl

和

ReactiveFormControl

MdAutocomplete文档：

有人知道有什么问题吗？

---

提前谢谢

问题是您应该使用

async

管道

此.filteredProjects

是一个可观察的

项目，因此必须执行以下操作：

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

感谢您的快速响应。异步成功了。我认为我不必使用它，因为我使用的是静态数据，而不是http请求。但是当this.filteredProjects是可观察的时，我就必须使用异步管道。
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();
    }
}

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