Question

我试图使用* ngFor循环从firebase数据库中循环出一个简单的字符串列表。但是我在控制台中收到错误消息：

Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngForAs' since it isn't a known property of 'li'. ("  <ul>
    <li [ERROR ->]*ngFor="let item as items | async">
        {{item.$value}}
    </li>
"): AppComponent@1:7
Property binding ngForAs not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("  <ul>
    [ERROR ->]<li *ngFor="let item as items | async">
        {{item.$value}}
    </li>
"): AppComponent@1:3 ; Zone: <root> ; Task: Promise.then ; Value: SyntaxError {__zone_symbol__error: Error: Template parse errors:
Can't bind to 'ngForAs' since it isn't a known property of 'li'. ("  <…, _nativeError: ZoneAwareError, __zone_symbol__currentTask: ZoneTask, __zone_symbol__stack: "Error: Template parse errors:↵Can't bind to 'ngFor…ttp://localhost:4200/polyfills.bundle.js:6423:35)", __zone_symbol__message: "Template parse errors:↵Can't bind to 'ngForAs' sin…         {{item.$value}}↵    </li>↵"): AppComponent@1:3"} Error: Template parse errors:
Can't bind to 'ngForAs' since it isn't a known property of 'li'. ("  <ul>
    <li [ERROR ->]*ngFor="let item as items | async">
        {{item.$value}}
    </li>
"): AppComponent@1:7
Property binding ngForAs not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("  <ul>
    [ERROR ->]<li *ngFor="let item as items | async">
        {{item.$value}}
    </li>
"): AppComponent@1:3
    at SyntaxError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:6869:33)
    at SyntaxError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:64389:16)
    at new SyntaxError (http://localhost:4200/vendor.bundle.js:5723:16)
    at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:17589:19)
    at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:47585:68)
    at http://localhost:4200/vendor.bundle.js:47468:62
    at Set.forEach (native)
    at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:47468:19)
    at createResult (http://localhost:4200/vendor.bundle.js:47350:19)
    at ZoneDelegate.invoke (http://localhost:4200/polyfills.bundle.js:6211:26)
    at Zone.run (http://localhost:4200/polyfills.bundle.js:6003:43)
    at http://localhost:4200/polyfills.bundle.js:6590:57
    at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:6244:31)
    at Zone.runTask (http://localhost:4200/polyfills.bundle.js:6043:47)
    at drainMicroTaskQueue (http://localhost:4200/polyfills.bundle.js:6423:35)

这是我用来循环的代码

<ul>
    <li *ngFor="let item as items | async">
        {{item.$value}}
    </li>
  </ul>

以下是组件代码：

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AngularFire, FirebaseListObservable } from 'angularfire2';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'app works!';

  items: FirebaseListObservable<any[]>;

  constructor(private af: AngularFire){
    this.items = af.database.list('/items');
  }
}

我之前在其他项目中使用了ngFor循环加载，但我不明白为什么这不起作用，请帮助我:)）

谢谢

Answer 1

<li *ngFor="let item as items | async">

应该是

<li *ngFor="let item of items | async">
                     ^^

AngularFire2无法绑定到'ngForAs'，因为它不是'li'的已知属性

1 个答案: