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分钟的时间来解决这个问题，我想我会发布Q＆amp;答：我希望它有助于其他人在路上......可能是我！

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

Befor 2-beta.17 ，应该是：

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

从测试版17开始，使用let语法代替#。有关详细信息，请参阅更新信息。

请注意ngFor语法＆＃34; desugars＆＃34;进入以下内容：

<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语法＆＃34; desugars＆＃34;进入以下内容：

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

如果我们改为使用in，则转为

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

Answer 2

TL; DR;

使用 让... 代替 让... !!

如果您是Angular（＆gt; 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">

因此，您必须在in指令中使用of 替换ngFor以获取值。

Answer 3

而非：

  template: `<div *ngFor="let talk in talks">

使用的：

template: `<div *ngFor="let talk of talks">

希望这可以解决问题。

Answer 4

在我的情况下，WebStrom自动完成插入小写*ngfor，即使您选择了正确的驼峰（*ngFor）。

Answer 5

尝试在import { CommonModule } from '@angular/common'; *ngFor中导入*ngIf CommonModule，QDialog *dialog = new QDialog(this); QPoint dialogPos = dialog->mapToGlobal(dialog->pos()); QPoint thisPos = mapToGlobal(this->pos()); dialog->exec();

Answer 6

如果您想使用of而不切换到in，则有另一种选择。您可以使用6.1中引入的KeyValuePipe。您可以轻松地遍历对象：

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

Answer 7

使用of代替in。您可以使用 KeyValue 管道。您可以轻松地遍历一个对象：

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

Answer 8

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

Answer 9

观看本课程https://app.pluralsight.com/library/courses/angular-2-getting-started-update/discussion

作者解释说，新版本的JavaScript具有for和for in，for的for枚举对象，而for in的枚举数组的索引。

Answer 10

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

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 11

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

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

Answer 12

我的解决方案是 - 只需删除＆＃39; *＆＃39;表达式中的字符^ __ ^

<div ngFor="let talk in talks">

角度异常：无法绑定到＆＃39; ngForIn＆＃39;因为它不是一个已知的本地财产

12 个答案:

TL; DR;