Angular 异常:无法绑定到 'ngForIn',因为它不是已知的本机 属性

Angular exception: Can't bind to 'ngForIn' since it isn't a known native property

我做错了什么?

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 分钟,所以我想我会 post 问答。我希望它能帮助其他人.. .可能是我!

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

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

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

在我的例子中,WebStorm 自动完成插入了小写 *ngfor,即使看起来您选择了正确的驼峰式大写字母 (*ngFor)。

我的解决方案是 - 只需从表达式 ^__^

中删除“*”字符
<div ngFor="let talk in talks">

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

TL;DR;

使用let...of代替let...in !!


如果您是 Angular (>2.x) 的新手并且可能从 Angular1.x 迁移过来,您很可能会混淆 inof.正如安德烈亚斯在下面的评论中提到的那样,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">

因此,您必须在 ngFor 指令中 in 替换为 of 以获取值。

问:无法绑定到 'pSelectableRow',因为它不是 'tr' 的已知 属性。

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

如果您想使用 of 而不是切换到 in,还有一个替代方案。可以使用6.1引入的KeyValuePipe。您可以轻松地遍历一个对象:

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

使用 of 而不是 in。您可以使用 KeyValue Pipe 。您可以轻松地遍历一个对象:

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

基本上,如果您使用新的 class 创建弹出窗口,那么此时您必须在

下添加 class
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 { }