Question

我基本上试图创建一个搜索栏，搜索数据然后显示该数据（通过点击按钮后基于搜索框输入的过滤器）（无论是来自维基百科还是本地假数据，它都没有没关系）

此错误已在不同的问题中多次发布，但解决方案的背景太不同，无法帮助我。

以下是错误的截图：

这是完整的项目（没有nodes_modules文件夹）：

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

带错误的代码（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);
  }
}

文本格式错误：

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 1

您需要使用#item代替let item，因为您已经安装了角度2.0.0-beta.15。

<li *ngFor="#item of items | async">{{item}}</li>

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

维基百科搜索栏错误：“无法绑定到* ngFor”（Angular2 / HTML / Javascript）

1 个答案: