Angular Material's FormControl causes error in *ngFor

Question

I want to use the MdAutocomplete Component of Angular Material2 in a *ngFor which repeats a component. But I get the following error:

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)

Here is the 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>

And here is the 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();
    }
}

Note: When I remove/comment the code in ngOnInit the error is gone (of course, the autocomplete doesn't work) in module.ts I'm importing FormControl and ReactiveFormControl

MdAutocomplete Documentation: MdAutocomplete

Does anyone know what's the problem? Thanks in advance!

score 0 · Accepted Answer · answered May 10 '17 at 20:27

0

The problem is that you should use async pipe.

this.filteredProjects is an Observable, so you must do the following:

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

answered May 10 '17 at 20:27

developer033

24,267
8
82
108

1

Thanks for your very fast response. Async did the trick. I've thought I dont have to use it because I'm using static data and not a http request. But when this.filteredProjects is an Observable it makes sense that I have to use the async pipe. – Roman May 10 '17 at 20:33

Angular Material's FormControl causes error in *ngFor

1 Answers1