angular - 角度异常：无法绑定到“ngForIn”，因为它不是已知的本机属性

Question

我究竟做错了什么？

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

Answer 1

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

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

在 2-beta.17 之前，它应该是：

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

从 beta.17 开始，使用let语法而不是#. 有关更多信息，请参阅下面的更新。

---

请注意，ngFor 语法“脱糖”为以下内容：

<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 语法“脱糖”为以下内容：

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

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

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

Answer 2

TL;博士;

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

---

如果您是 Angular (>2.x) 的新手并且可能从 Angular1.x 迁移，那么您很可能in对of. 正如安德烈亚斯在下面的评论中提到的那样，在for ... of对象中迭代时迭代对象。这是 ES2015 中引入的一个新特性。values for ... inproperties

只需更换：

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

因此，您必须用inside指令替换inofngFor才能获取值。

Answer 3

如果您想使用of而不是切换到in. 可以使用KeyValuePipe6.1 中介绍的。您可以轻松地迭代对象：

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

Answer 4

尝试import { CommonModule } from '@angular/common';在 angular final as中导入*ngFor，*ngIf所有内容都存在于CommonModule

Answer 5

使用of而不是in。您可以使用KeyValue Pipe。您可以轻松地迭代对象：

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

Answer 6

就我而言，WebStrom 会自动完成插入小写字母*ngfor，即使看起来您选择了正确的驼峰式大小写字母 ( *ngFor)。

Answer 7

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

Answer 8

基本上，如果您使用新类创建弹出窗口，那么此时您必须将该类添加到

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 { }

Answer 9

问：不能绑定到“pSelectableRow”，因为它不是“tr”的已知属性。

A:需要在ngmodule中配置primeng tabulemodule

Answer 10

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

<div ngFor="let talk in talks">