Angular Material Form Control 导致 *ngFor 中的错误答案

【问题标题】：Angular Material's FormControl causes error in *ngForAngular Material Form Control 导致 *ngFor 中的错误
【发布时间】：2017-05-10 20:20:42
【问题描述】：

我想在重复组件的*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 (work-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();
    }
}

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

MdAutocomplete 文档：MdAutocomplete

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

【问题讨论】：

标签： angular angular-material2 ngfor md-autocomplete

【解决方案1】：

问题是你应该使用asyncpipe。

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

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

【讨论】：

感谢您的快速响应。异步成功了。我认为我不必使用它，因为我使用的是静态数据而不是 http 请求。但是当 this.filteredProjects 是一个 Observable 时，我必须使用异步管道是有道理的。