Исключение: невозможно связать с 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">

Ответ 1

Я пропустил 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">

Это так легко забыть #. Мне бы хотелось, чтобы в сообщении об ошибке Angular исключение было сказано:
you forgot that # again.

Ответ 2

Другая опечатка, приводящая к ошибке OP, может быть использована in:

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

Вы должны использовать of вместо:

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

Ответ 3

Это выражение используется в бета-версии Angular2.....

Здесь и далее используйте let вместо #

ключевое слово let используется для объявления локальной переменной

Ответ 4

В моем случае это была маленькая буква f. Я разделяю этот ответ только потому, что это первый результат в google

обязательно напишите *ngFor

Ответ 5

В моем случае я допустил ошибку при копировании *ng-for= из документов.

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

Исправьте меня, если я ошибаюсь. Но кажется, что *ng-for= было изменено на *ngFor=

Ответ 6

Для меня, чтобы сократить длинную историю, я был непреднамеренно понижен до angular -beta-16.

Синтаксис let... ТОЛЬКО действует в версии 2.0.0-beta.17 +

Если вы попробуете синтаксис let на чем-нибудь ниже этой версии. Вы будете генерировать эту ошибку.

Либо обновить до angular -beta-17, либо использовать синтаксиС#item в элементах.

Ответ 7

В angular 7 это исправлено путем добавления этих строк в файл .module.ts:

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

Ответ 8

Я забыл аннотировать свой компонент с помощью " @Input " (Doh!)

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

}

Ответ 9

Также не пытайтесь использовать чистый TypeScript в этом... Я хотел больше соответствовать for использования и использовать *ngFor="const filter of filters" и получил ngFor не известную ошибку свойства. Просто замена const на let работает.

Как @сказал александр-Абакумов для of заменены in.

Ответ 10

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

Ответ 11

Вы должны использовать ключевое слово let для объявления локальных переменных например, * ngFor = "давай поговорим о разговорах"