Angular Material 的 FormControl 导致 *ngFor 出错

Question

我想在重复组件的 *ngFor 中使用 Angular Material2 的 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（作品-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>

这是 TypeScript (work-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();
    }
}

注意：当我remove/comment ngOnInit 中的代码错误消失了（当然，自动完成不起作用）在 module.ts 我正在导入 FormControl 和 ReactiveFormControl

MdAutocomplete 文档：MdAutocomplete

有谁知道问题出在哪里？提前致谢！

Answer 1

问题是你应该使用async pipe.

this.filteredProjects 是一个 Observable，因此您必须执行以下操作：

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

Angular Material 的 FormControl 导致 *ngFor 出错

Angular Material's FormControl causes error in *ngFor

md-autocomplete

ngfor

angular-material2

angular