我做错了什么?

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">

推荐答案

由于这至少是我第三次在这个问题上浪费了超过5分钟的时间,所以我想我应该把问答贴出来.我希望它能帮助以后的其他人.可能是我!

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

Befor 2-beta.17,应该是:

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

As of beta.17, use the 100 syntax instead of 101. See the UPDATE further down for more info.


请注意,ngFor语法"desugars"如下所示:

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

如果我们用in来代替,它会变成

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

由于ngForIn不是具有同名输入属性(如ngIf)的属性指令,因此ANGLING然后try 查看它是否是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>

Angular相关问答推荐

间歇性不正确的SSR重定向(server. ts级别的请求和响应不匹配)

在Angular中将路由解析器提供程序和组件提供程序相结合

如何在Angular 17 SSR中处理Swiper 11 Web组件事件

使用Angular 13的NgxPrinterService打印时,第二页上的空白区域

截取提取后端S获取添加授权头的请求

我正在try 将一个带有模块联盟的Angular 8项目expose 到另一个Angular 项目,Angular 是15,这可能吗?如果是这样,有什么建议吗?

无法在Mat-SideNav中绑定模式

如何在Angular功能路由保护中取消订阅RxJs主题

MonoTypeOperatorFunction不可分配给OperatorFunction类型的参数

如何正确导出/导入枚举和接口文件以便 Jest 成功完成测试?

Nx Angular Monorepo 中 cypress 组件测试的代码覆盖率?

如何在Angular Material2中获取活动选项卡

无法获得 angular-material md-sidenav 的 100% 高度

如何处理解析器中的错误

初始化所有子类后的Angular 2生命周期钩子是什么?

得到了预期表达式的插值 ({{}})

Hot and Cold observables:有 hot和 cold运算符吗?

为什么 Angular 项目中没有 Angular-CLI 为 model生成命令?

如何将 @Input 与使用 ComponentFactoryResolver 创建的组件一起使用?

如何使用 Angular CLI 删除包?