Виняток: Неможливо прив’язати до 'ngFor', оскільки це не відома рідна властивість

Що я роблю неправильно?

import {bootstrap, Component} from 'angular2/angular2'

@Component({
  selector: 'conf-talks',
  template: `<div *ngFor="talk of 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 'ngFor' since it isn't a known native property
("<div [ERROR ->]*ngFor="talk of talks">

Я пропустив letперед talk:

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

Зауважте, що з бета.17 використання #...декларації локальних змінних усередині структурних директив на зразок NgFor застаріле. Використовуйте letзамість цього.

<div *ngFor="#talk of talks"> тепер стає <div *ngFor="let talk of talks">

Оригінальна відповідь:

Я пропустив #перед talk:

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

Це так просто забути #. Я бажаю , щоб повідомлення про помилку Кутовий виняток замість цього сказати:
you forgot that # again.

Ще однією помилкою, що призводить до помилки ОП, може бути використання in:

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

Ви повинні використовувати ofзамість цього:

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

Ця заява використовується в бета-версії Angular2 .....

Надалі використовуйте нехай замість #

нехай ключове слово використовується для оголошення локальної змінної

У моєму випадку це був маленький лист f. Я ділюсь цією відповіддю лише тому, що це перший результат у Google

обов’язково напишіть *ngFor

У куті 7 це виправлено додаванням цих рядків у .module.tsфайл:

import { CommonModule } from '@angular/common'; imports: [CommonModule]

Ви повинні використовувати ключове слово let для декларації локальних змінних, наприклад * ngFor = "хай буде розмова"

Для мене, якщо скоротити довгу історію, я ненароком перейшов до кутової бета-16.

Синтаксис нехай ... дійсно ТОЛЬКО дійсний у 2.0.0-beta.17 +

Якщо ви спробуєте синтаксис дозволити на чомусь нижче цієї версії. Ви генеруєте цю помилку.

Або перейдіть на angular-beta-17 або використовуйте #item в синтаксисі елементів.

У моєму випадку я допустив помилку копіювання *ng-for=з документів.

https://angular.io/guide/user-input

Виправте мене, якщо я помиляюся. Але, схоже *ng-for=, було змінено на*ngFor=

Я забув помітити свій компонент за допомогою " @ Input " (До!)

book-list.component.html (Порушення коду):

<app-book-item
  *ngFor="let book of book$ | async"
  [book]="book">  <-- Can't bind to 'book' since it isn't a known property of 'app-book-item'
</app-book-item>

Виправлена ​​версія book-item.component.ts :

import { Component, OnInit, Input } from '@angular/core';

import { Book } from '../model/book';
import { BookService } from '../services/book.service';

@Component({
  selector: 'app-book-item',
  templateUrl: './book-item.component.html',
  styleUrls: ['./book-item.component.css']
})
export class BookItemComponent implements OnInit {

  @Input()
  public book: Book;

  constructor(private bookService: BookService)  { }

  ngOnInit() {}

}

Також не намагайтеся використовувати чистий TypeScript у цьому ... Я хотів більше відповідати forвикористанню та використанню, *ngFor="const filter of filters"і я отримав ngЗа не відомою помилкою властивості. Просто заміна const на let працює.

Як сказав @ alexander-abakumov ofзамінений на in.

У моєму випадку модуль, що містить компонент, що використовує * ngFor, що призводить до цієї помилки, не був включений у app.module.ts. Включення його там до масиву імпорту вирішило проблему для мене.

Тільки, щоб висвітлити ще один випадок, коли я отримував ту саму помилку, і причину використовував в замість з в ітератора

Неправильний шлях let file in files

Правильний шлях let file of files

Використовуй це

<div *ngFor="let talk of talks> 
   {{talk.title}} 
   {{talk.speaker}}
   <p>{{talk.description}} 
</div>

Вам потрібно вказати змінну для ітерації над масивом об'єкта