예외:'ngFor'는 알려진 네이티브 속성이 아니므로 바인딩할 수 없습니다.

예외:'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">

---

beta.17의 사용현황에 주의해 주세요.#...NgFor와 같은 구조적 지시어 내에 지역 변수를 선언하는 것은 권장되지 않는다.사용하다let대신.

<div *ngFor="#talk of talks">이 되다<div *ngFor="let talk of talks">

원답:

놓쳤다#앞에talk:

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

을 잊어버리기 쉽다.#Angular exception 오류 메시지에 대신 다음과 같이 표시되었으면 합니다.
you forgot that # again.

OP 오류의 원인이 되는 또 다른 오타에는in:

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

를 사용해 주세요.of대신:

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

이 스테이트먼트는 Angular2 베타 버전에서 사용됩니다.

이후 # 대신 let 사용

let 키워드는 로컬 변수를 선언하기 위해 사용됩니다.

각도 7에서는 이 선들을 더해서 이것을 고정시켰다..module.ts파일:

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

내 경우엔 작은 편지였다.f구글에서의 첫 번째 결과이기 때문에 이 답변을 공유합니다.

꼭 쓰다 *ngFor

로컬 변수를 선언하려면 let 키워드를 사용해야 합니다(예: *ngFor="let talk of talks").

한마디로 말하자면, 나는 부주의로 앵글베타-16으로 다운그레이드되었다.

let... 구문은 2.0.0-beta에서만 유효합니다.17+

이 버전보다 낮은 버전에서 let 구문을 시도하면 됩니다.이 에러가 발생합니다.

angular-beta-17로 업그레이드하거나 항목 구문에 #item을 사용합니다.

내 경우 복사하는 실수를 저질렀다.*ng-for=의사로부터.

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

내가 틀렸다면 정정해 주세요.하지만 그런 것 같다*ng-for=로 변경되었습니다.*ngFor=

같은 에러가 발생하고 그 이유가 반복기가 아닌 in에서 사용되었을 때 한 가지 사례를 더 커버하기 위해서입니다.

길을 잘못 들다let file in files

올바른 방법let file of files

컴포넌트에 "@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"ngFor not known property 오류가 발생하였습니다.const를 let으로 대체하는 것만으로 효과가 있습니다.

@alexander-abakumov가 말했듯이of로 대체되다in.

이것을 사용하다

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

개체 배열에 대해 반복할 변수를 지정해야 합니다.

제 경우 *ngFor를 사용한 컴포넌트가 포함된 모듈이 app.module.ts에 포함되어 있지 않았습니다.Imports Array에 포함시킴으로써 문제가 해결되었습니다.

저 엔, 이 사이에 .= ★★★★★★★★★★★★★★★★★」" ,

예: 틀렸습니다.

*ngFor = "let talk of talks"

오른쪽:

*ngFor="let talk of talks"

*ngFor='for let card of cards'
음음음:
*ngFor='let card of cards'

처음에는 여기 잘못된 "for loop" 같은 것을 가지고 있었다.
가 있었지만 .

제 경우, 제가 가지고 있는 for 루프 내에서 루프 변수를 선언하지 않았습니다.

<div *ngFor="pizza of pizzas; index as i">

대신

<div *ngFor="let pizza of pizzas; index as i">

'렛'으로 선언하고 나니 효과가 있었어요.

저는 컴포넌트가 app.module.ts 파일에 올바르게 Import되지 않았습니다.Import 후에는 모든 것이 정상적으로 동작합니다.

@NgModule({
    declarations: [
      YourComponent,
      OtherComponents
    ],
    
    imports: [...]

)}

언급URL : https://stackoverflow.com/questions/34012291/exception-cant-bind-to-ngfor-since-it-isnt-a-known-native-property