首页 文章

't bind to ' ng-forOf ' since it isn' t是一个已知的原生 property

提问于
浏览 次
80

我想在这里遵循基本的Angular 2教程：

https://angular.io/docs/js/latest/guide/displaying-data.html

我可以使用以下代码加载角度应用并显示我的名字：

import { Component, View, bootstrap } from 'angular2/angular2';

@Component({
    selector: "my-app"
})

class AppComponent {
    myName: string;
    names: Array<string>;
    constructor() {
        this.myName = "Neil";

    }

}
bootstrap(AppComponent);

但是，当我尝试添加一个字符串数组并尝试使用ng-for显示它们时，它会抛出以下错误：

Can't bind to 'ng-forOf' since it isn't a known native property ("
    <p>Friends:</p>
    <ul>
        <li [ERROR ->]*ng-for="#name of names">
        {{ name }}
        </li>
"): AppComponent@4:16
Property binding ng-forOf not used by any directive on an embedded template ("
    <p>Friends:</p>
    <ul>
        [ERROR ->]<li *ng-for="#name of names">
        {{ name }}
        </li>
"): AppComponent@4:12

这是代码：

import { Component, View, bootstrap } from 'angular2/angular2';

@Component({
    selector: "my-app"
})

@View({
    template: `
        <p>My name: {{ myName }}</p>
        <p>Friends:</p>
        <ul>
            <li *ng-for="#name of names">
                {{ name }}
            </li>
        </ul>
    `,
    directives: [ NgFor ]
})

class AppComponent {
    myName: string;
    names: Array<string>;
    constructor() {
        this.myName = "Neil";
        this.names = ["Tom", "Dick", "Harry"];
    }

}
bootstrap(AppComponent);

我错过了什么？

angular

9 回答

  • 4

    如果您使用alpha 52，请查看GitHub仓库中的CHANGELOG.md . 他们将模板更改为区分大小写，即 ngFor 而不是 ng-for （类似于所有其他指令）

    像 <router-outlet> 这样的元素名称没有改变，但为了与自定义元素规范保持兼容，需要在自定义元素的标记名称中使用破折号 .

    在 >= RC.5 (and final) ngFor 中，类似的指令默认不是环境 . 需要明确提供它们

    @NgModule({
  imports: [CommonModule],

    或者如果您不介意将模块锁定为仅浏览器

    @NgModule({
  imports: [BrowserModule],

    BrowserModule出口CommonModule也像WorkerAppModule那样 .

    Update

    BrowserModule 应该在app模块中导入，而在其他模块中应该导入 CommonModule .

    回复于
  • 4

    With Angular 2.1.0+

    看起来这是相同的，除非您应该在应用程序模块中导入 BrowserModule 并在其他模块中导入 CommonModule （您无法使用路径延迟加载导入BrowserModule两次） .

    With Angular 2 rc5 :

    此版本引入了NgModules，您需要在模块中导入 BrowserModule 才能使用 ngFor 和 ngIf ：

    BrowserModule注册关键应用程序服务提供商 . 它还包括NgIf和NgFor等常用指令，这些指令在任何模块组件模板中都可立即显示和使用 .

    例：

    import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';


@NgModule({
  imports: [BrowserModule],
  providers: [],
  exports: [],
  declarations: []
})
export class MyModule { }
    回复于
  • 12

    在Angular2 beta ng-for 中是不正确的 . 它应该是 *ngFor .

    回复于
  • 136

    ngIf和ngFor在 CommonModule 中从 @angular/common 声明 .

    CommonModule 贡献了许多应用程序需要的通用指令，包括ngIf和ngFor .

    BrowserModule 导入 CommonModule 并重新导出它 . 实际效果是BrowserModule的导入器自动获取CommonModule指令 .

    更新您的代码如下

    import { CommonModule } from '@angular/common';

@NgModule({
imports: [CommonModule]
})
// In HTML
<li *ngFor="let customer of customers">{{customer.name}}</tr>

    了解更多信息Angular Module

    回复于
  • 0

    ngFor指令的语法是

    <tr *ngFor="let name of names">{{name}}</tr>

    请注意 is no longer #name of names ，因为它是 let name of names 并且ngFor需要*并且区分大小写 .

    回复于
  • 9

    在其他答案的背后，另一个可能的原因是你使用了一些html formatter-repacker，它将你的所有HTML（包括组件模板）转换为小写 .

    对于 ngFor 和 ngIf 标签，Angular模板替换是区分大小写的，至少在今天，但我不能确定下周的任何事情 .

    特别是webpack插件，例如htmljs或html-minify，它们在默认设置下将所有内容转换为小写时效果很差 . 双击编译文本中的HTML代码，它可能全部小写（如 *ngif= ...），即使在原始来源中它是正确的，也不会被接受！

    当然它打破了HTML5标准 .

    之所以发生这种情况，是因为我们最精彩的angular2开发认为"they wish to follow html5 more closely"，但总有一些令人惊讶的异常，使得angular2的工作总是越来越好 .

    回复于
  • 33

    它也可能是由一个错字造成的 . 我刚遇到这个问题

    <div class="row" *ngFor="let order or orders">

    如你所见，有 let order or orders 而不是 let order of orders

    回复于
  • 1

    小心错字：它是

    • ngFor

    • 不是ng-for

    • 不是为了

    • not ng-For

    回复于
  • 1

    鉴于它在the other issue marked as a duplicate of this one上取得了如此大的成功，这里有一个我的回应，收到了很多赞成票：

    对于任何错过它的人来说，我也有一个问题，我输入ngif而不是ngIf（注意国会大厦'我'） .

    回复于

相关问题