我做错了什么?
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">
我输入了而不是ngFor表达式。
之前2 beta。17、它应该是:
<div *ngFor="#talk of talks">
从beta开始。17、使用let语法代替#。更多信息请参见下面的UPDATE。
注意ngFor语法“desugars”变成如下:
<template ngFor #talk [ngForOf]="talks">
<div>...</div>
</template>
如果我们用in代替，它就变成了into
<template ngFor #talk [ngForIn]="talks">
<div>...</div>
</template>
由于ngForIn不是一个具有同名输入属性的属性指令(不像ngIf)， Angular会尝试查看它是否是模板元素的一个(已知的本机)属性，而它不是，因此会出现错误。
更新-从2-beta开始。17、使用let语法代替#。更新内容如下:
<div *ngFor="let talk of talks">
注意ngFor语法“desugars”变成如下:
<template ngFor let-talk [ngForOf]="talks">
<div>...</div>
</template>
如果我们用in代替，它就变成了into
<template ngFor let-talk [ngForIn]="talks">
<div>...</div>
</template>
TL; diana;
使用让…而不是let…在! !
如果你刚接触Angular (>2.x)，而且可能是从Angular1迁移过来的。X，很可能你把它和of搞混了。正如andreas在下面的评论中提到的……Of迭代对象的值，而for…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">
因此，你必须将in替换为ngFor指令中的of来获取值。
基本上，如果你用一个新类创建一个弹出窗口，那么在那个时候你必须把那个类添加到
declarations: []
在base。module.ts或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 { }
