sweve sweve - 6 months ago 50
Javascript Question

Wikipedia Search bar error: "Can't bind to *ngFor" (Angular2 / HTML / Javascript)

I'm basically trying to create a search bar that searches through data then displays that data (through a filter based on the input of the search box after clicking a button) (either from wikipedia or just local fake data, it doesn't matter)

This error has been posted many times in a different question but the context of the solution was too different to help me.

Here is the screenshot for what the error looks like:

enter image description here

Here is the full project (without the nodes_modules folder):

https://www.dropbox.com/s/kxq1qgfhh8huudz/FullProject.zip?dl=0

Code with the error (wiki.component.ts):

import { Component } from 'angular2/core';
import { JSONP_PROVIDERS } from 'angular2/http';
import { Observable } from 'rxjs/Observable';
import { WikipediaService } from './wikipedia.service';
@Component({
selector: 'Wikithing',
template: `
<h1>Wikipedia Demo</h1>
<p><i>Fetches after each keystroke</i></p>
<input #term (keyup)="search(term.value)"/>
<ul>
<li *ngFor="let item of items | async">{{item}}</li>
</ul>
`,
providers:[JSONP_PROVIDERS, WikipediaService]
})
export class WikiComponent {
constructor (private wikipediaService: WikipediaService) {}
items: Observable<string[]>;
search (term: string) {
this.items = this.wikipediaService.search(term);
}
}


Error in text format:

Failed to load resource: the server responded with a status of 404 (Not Found)
angular2.dev.js:384 Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
angular2.dev.js:23935 EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Parser Error: Unexpected token | at column 25 in [ngFor let item of items | async] in WikiComponent@5:10 ("
<input #term (keyup)="search(term.value)"/>
<ul>
<li [ERROR ->]*ngFor="let item of items | async">{{item}}</li>
</ul>
"): WikiComponent@5:10

Answer

You need to use #item instead let item because you have installed angular 2.0.0-beta.15.

See also https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta17-2016-04-28

Comments