Ngoại lệ góc: Không thể liên kết với 'ngForIn' vì đây không phải là tài sản bản địa đã biết

Tôi đang làm gì sai?

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, [])

Lỗi là

EXCEPTION: Template parse errors:
Can't bind to 'ngForIn' since it isn't a known native property
("<div [ERROR ->]*ngFor="let talk in talks">

Vì đây ít nhất là lần thứ ba tôi đã lãng phí hơn 5 phút cho vấn đề này, tôi nghĩ rằng tôi đã đăng Câu hỏi và tôi hy vọng nó sẽ giúp người khác xuống đường ... có lẽ là tôi!

Tôi gõ inthay vì oftrong biểu thức ngFor.

Befor 2-beta.17 , cần phải là:

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

Kể từ phiên bản beta.17, hãy sử dụng letcú pháp thay vì #. Xem CẬP NHẬT thêm xuống để biết thêm.

Lưu ý rằng cú pháp ngFor "desugars" như sau:

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

Nếu chúng ta sử dụng inthay thế, nó biến thành

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

Do ngForInkhông phải là một chỉ thị thuộc tính có thuộc tính đầu vào có cùng tên (như ngIf), nên Angular sau đó cố gắng xem liệu đó có phải là thuộc tính (được biết đến) của thành templatephần hay không, do đó không phải là lỗi.

CẬP NHẬT - kể từ 2-beta.17, sử dụng letcú pháp thay vì #. Bản cập nhật này như sau:

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

Lưu ý rằng cú pháp ngFor "desugars" như sau:

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

Nếu chúng ta sử dụng inthay thế, nó biến thành

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

TL; DR;

Sử dụng let ... thay vì cho ... vào !!

Nếu bạn là người mới đến góc (> 2.x) và có thể chuyển từ Angular1.x, rất có thể bạn đang bối rối invới of. Như andreas đã đề cập trong các bình luận bên dưới for ... oflặp đi lặp lại values của một đối tượng trong khi for ... inlặp đi lặp lại properties trong một đối tượng. Đây là một tính năng mới được giới thiệu trong ES2015.

Chỉ cần thay thế:

<!-- Iterate over properties (incorrect in our case here) -->
<div *ngFor="let talk in talks">

với

<!-- Iterate over values (correct way to use here) -->
<div *ngFor="let talk of talks">

Vì vậy, bạn phải thay thế inbằngofngFor chỉ thị bên trong để có được các giá trị.

Cố gắng nhập import { CommonModule } from '@angular/common'; vào cuối cùng góc *ngFor, như *ngIftất cả đều có mặt trongCommonModule

Trong trường hợp của tôi, WebStrom tự động hoàn thành chèn thấp hơn *ngfor, ngay cả khi có vẻ như bạn chọn đúng con lạc đà có vỏ ( *ngFor).

Vấn đề của tôi là, rằng Visual Studio bằng cách nào đó tự động lowercased *ngFor để *ngforthao tác copy và dán.

Có một sự thay thế nếu bạn muốn sử dụng ofvà không chuyển sang in. Bạn có thể sử dụng được KeyValuePipegiới thiệu trong 6.1. Bạn có thể dễ dàng lặp lại qua một đối tượng:

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

H: Không thể liên kết với 'pSelectableRow' vì đây không phải là thuộc tính đã biết của 'tr'.

Trả lời: bạn cần định cấu hình tabulemodule trong ngmodule

giải pháp của tôi là - chỉ cần xóa ký tự '*' khỏi biểu thức ^ __ ^

<div ngFor="let talk in talks">