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

186

Что я делаю неправильно?

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">
Теги:
angular
angular2-directives

7 ответов

453
Лучший ответ

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

Поделиться
  • 0
    Для чего именно амперсанд? Я исправил свои собственные проблемы, но я не уверен, что это вообще делает.
  • 3
    @datatype_void, хеш ( # ) используется для объявления локальной переменной шаблона
Показать ещё 4 комментария
41

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

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

вместо того, чтобы of:

<div *ngFor="let talk of talks">
Поделиться
16

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

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

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

Поделиться
8

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

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

Поделиться
3

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

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

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

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

Поделиться
2

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

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

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

Поделиться
  • 0
    Кстати, эта ссылка отображает ошибку 404
0

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

}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню