Angular异常:不能't bind to '因为它不是一个已知的本地财产

我做错了什么?

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">
185679 次浏览
小开
最佳答案

因为这至少是我第三次在这个问题上浪费超过5分钟了，所以我想我应该发布一个问题。答:我希望它能帮助其他人……可能我!

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

在2-beta.17，它应该是:

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

从beta开始。17，使用let语法代替#。更多信息请参见下面的UPDATE。

注意ngFor语法“desugars”变成如下:

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

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

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

由于ngForIn不是一个具有同名输入属性的属性指令(如ngIf)， Angular会尝试查看它是否是template元素的(已知本机)属性，而它不是，因此会出现错误。

更新 -从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>
小开

我的问题是，Visual Studio以某种方式在复制粘贴时自动小写的 *ngFor到*ngfor。

小开

在我的情况下，WebStrom自动补全插入小写的*ngfor，即使它看起来像你选择了正确的驼峰大小写(*ngFor)。

小开

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

<div ngFor="let talk in talks">
小开

尝试在angular final中导入import { CommonModule } from '@angular/common';，因为*ngFor，*ngIf都存在于CommonModule中

小开

TL,博士;

使用< em >让…< / em >代替< em >让…< / em > !!

如果你刚接触Angular (>2.x)，而且可能是从Angular1迁移过来的。x，很可能你混淆了in和of。正如andreas在下面的评论中提到的，for ... of迭代values 的对象，而for ... in迭代properties 在对象。这是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">

所以，你必须在ngFor指令中用__ABC1替换in来获取值。

小开

Q:不能绑定到'pSelectableRow'，因为它不是'tr'的已知属性。

答:你需要在ngmodule中配置primeng tabulemodule

小开

如果你想使用of而不切换到in，还有一个替代方案。你可以使用6.1中引入的KeyValuePipe。你可以很容易地迭代一个对象:

<div *ngFor="let item of object | keyvalue">
\{\{item.key}}:\{\{item.value}}
</div>
小开

使用的代替在。你可以使用KeyValue管。你可以很容易地迭代一个对象:

<div *ngFor="let items of allObject | keyvalue">
\{\{items.key}}:\{\{items.value}}
</div>
小开

基本上，如果你用一个新类创建一个弹出窗口，那么在那个时候你必须把那个类添加到

declarations: []

在base.module.ts or app.module.ts

我的示例代码

########################## 我的组件 ##################################

@Component({
selector: 'app-modal-content',
templateUrl: './order-details.html',
encapsulation: ViewEncapsulation.None,
styles: []
})


export class NgbdModalContent {
@Input() orderDetails: any;
private orderId;
private customer;
private orderDate;
private shipDate;
private totalAmount;
private salesTax;
private shippingCost;
private transactionStatus;
private isPaid;
private isMailSent;
private paymentDate;


// private orderDetails;


constructor(public activeModal: NgbActiveModal) {
}
}

########################### 基础模块 #################################

@NgModule({
imports: [
CommonModule,
FormsModule
],
declarations: [
NavbarsComponent,
NgbdModalContent,
]
})
export class BaseModule { }
小开

简单地改变“;in"“;of"解决了我同样的问题。

Chnage <div *ngFor="let talk in talks">


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

提交答案