Исключение: невозможно связать с ngFor, поскольку это не известное нативное свойство

286

Что я делаю не так?

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">
Марк Райкок
источник

Ответы:

644

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

Марк Райкок
источник
Для чего именно амперсанд? Я исправил свои проблемы, но не уверен, что это вообще делает.
datatype_void
4
@datatype_void, hash ( #) используется для объявления локальной переменной шаблона
Марк Райкок
Я попытался использовать синтаксис «let» вместо #, он вывел «Can't bind to ngFor», поскольку это не известное нативное свойство ». Такое же поведение, как вы видели в исходном вопросе. Я изменил его обратно на #, и он, казалось, работал без каких-либо проблем. Я использую angular2.0.0-rc.1 и у меня такое же поведение с angular2.0.0-beta.17
Chadley08
1
@ Chadley08, создай поршень. Он должен работать. Вот панкер rc.1 и плункер beta.17, которые оба работают отлично.
Марк Райкок
Вот проблема Angular о том, что сообщение об ошибке вводит в заблуждение: github.com/angular/angular/issues/10644
Александр Тейлор,
80

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

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

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

<div *ngFor="let talk of talks">
Александр Абакумов
источник
21

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

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

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

Нэвин
источник
13

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

не забудьте написать *ngFor

Мохамед Кавсара
источник
10

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

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

Альферд Нобель
источник
2
Удивлен, что это не имеет больше голосов. Совершенно забыл импортировать CommonModule в один из моих модулей и сам столкнулся с этой ошибкой.
Аллен
8

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

Rsona
источник
5

Короче говоря, я случайно понизился до angular-beta-16.

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

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

Либо обновите до angular-beta-17, либо используйте синтаксис #item в items.

Shaun
источник
5

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

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

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

Крис Холленбек
источник
2

Я забыл аннотировать свой компонент с помощью @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() {}

}
paulsm4
источник
2

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

Как сказал @ alexander-abakumov, ofзаменили на in.

shamox
источник
моя проблема была вместо "из", который я использовал "в"
Ишимве Обен Консолятер
0

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

Рой Тоу
источник
0

Просто , чтобы покрыть еще один случай , когда я получаю ту же ошибку , и причина была использованием в вместо из в итератора

Неправильный способ let file in files

Правильный путь let file of files

Робин Матур
источник
0

Использовать это

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

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

Акшай С Патил
источник