首页 文章

角度异常：'t bind to ' ngForIn ' since it isn' t是一个已知的原生属性

提问于
浏览 次
230

我究竟做错了什么？

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

@Component({
  selector: 'conf-talks',
  template: `<div *ngFor="let talk in talks">
     {{talk.title}} by {{talk.speaker}}
     <p>{{talk.description}}
   </div>`
})
class ConfTalks {
  talks = [ {title: 't1', speaker: 'Brian', description: 'talk 1'},
            {title: 't2', speaker: 'Julie', description: 'talk 2'}];
}
@Component({
  selector: 'my-app',
  directives: [ConfTalks],
  template: '<conf-talks></conf-talks>'
})
class App {}
bootstrap(App, [])

错误是

EXCEPTION: Template parse errors:
Can't bind to 'ngForIn' since it isn't a known native property
("<div [ERROR ->]*ngFor="let talk in talks">
angular angular2-directives

8 回答

  • 5

    由于这至少是我第三次浪费超过5分钟来解决这个问题，我想我会发布Q＆A . 我希望它可以帮助别人在路上......可能是我！

    我在ngFor表达式中输入 in 而不是 of .

    Befor 2-beta.17 ，它应该是：

    <div *ngFor="#talk of talks">

    从beta.17开始，使用 let 语法而不是 # . 有关详细信息，请参阅更新信息 .

    请注意，ngFor语法“desugars”到以下内容：

    <template ngFor #talk [ngForOf]="talks">
  <div>...</div>
</template>

    如果我们改用 in ，它会变成

    <template ngFor #talk [ngForIn]="talks">
  <div>...</div>
</template>

    由于 ngForIn 不是具有相同名称的输入属性的属性指令（如 ngIf ），因此Angular会尝试查看它是否是 template 元素的（已知的本机）属性，而不是，因此是错误 .

    UPDATE - 从2-beta.17开始，使用 let 语法而不是 # . 这会更新到以下内容：

    <div *ngFor="let talk of talks">

    请注意，ngFor语法“desugars”到以下内容：

    <template ngFor let-talk [ngForOf]="talks">
  <div>...</div>
</template>

    如果我们改用 in ，它会变成

    <template ngFor let-talk [ngForIn]="talks">
  <div>...</div>
</template>
    回复于
  • 8

    TL; DR;

    使用 let...of 而不是 let...in !!

    如果你 in 与 of 混淆 in . 正如andreas在下面的评论中提到的 for ... of 迭代 values of 一个对象，而 for ... in 遍历 properties in 一个对象 . 这是ES2015中引入的新功能 .

    简单地替换：

    <!-- Iterate over properties (incorrect in our case here) -->
<div *ngFor="let talk in talks">

    同

    <!-- Iterate over values (correct way to use here) -->
<div *ngFor="let talk of talks">

    因此，您必须 replace in with of 在 ngFor 指令内获取值 .

    回复于
  • 483

    在我的情况下，WebStrom自动完成插入小写 *ngfor ，即使它看起来你选择了正确的骆驼套装（ *ngFor ） .

    回复于
  • 159

    而不是 in ：

    template: `<div *ngFor="let talk in talks">

    使用 of ：

    template: `<div *ngFor="let talk of talks">

    希望这能解决问题 .

    回复于
  • 6

    尝试在角度最终导入 import { CommonModule } from '@angular/common'; 为* ngFor，* ngIf所有都存在于CommonModule中

    回复于
  • 10

    我的问题是，Visual Studio以某种方式自动 lowercased * ngFor to * ngfor复制和粘贴 .

    回复于
  • -8

    问：无法绑定到'pSelectableRow'，因为它不是'tr'的已知属性 .

    答：您需要在ngmodule中配置primeng tabulemodule

    回复于
  • -1

    我的解决方案是 - 只需从表达式^ __ ^中删除'*'字符

    <div ngFor="let talk in talks">
    回复于

相关问题