알려진 네이티브 속성이 아니므로 'ng-forOf'에 바인딩 할 수 없습니다.

알려진 네이티브 속성이 아니므로 'ng-forOf'에 바인딩 할 수 없습니다.

---

여기에 기본 Angular 2 자습서를 따르려고합니다.

https://angular.io/docs/js/latest/guide/displaying-data.html

다음 코드를 사용하여 앵귤러 앱을로드하고 내 이름을 표시 할 수 있습니다.

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

@Component({
    selector: "my-app"
})

class AppComponent {
    myName: string;
    names: Array<string>;
    constructor() {
        this.myName = "Neil";

    }

}
bootstrap(AppComponent);

그러나 문자열 배열을 추가하고 ng-for로 표시하려고하면 다음 오류가 발생합니다.

Can't bind to 'ng-forOf' since it isn't a known native property ("
    <p>Friends:</p>
    <ul>
        <li [ERROR ->]*ng-for="#name of names">
        {{ name }}
        </li>
"): AppComponent@4:16
Property binding ng-forOf not used by any directive on an embedded template ("
    <p>Friends:</p>
    <ul>
        [ERROR ->]<li *ng-for="#name of names">
        {{ name }}
        </li>
"): AppComponent@4:12

다음은 코드입니다.

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

@Component({
    selector: "my-app"
})

@View({
    template: `
        <p>My name: {{ myName }}</p>
        <p>Friends:</p>
        <ul>
            <li *ng-for="#name of names">
                {{ name }}
            </li>
        </ul>
    `,
    directives: [ NgFor ]
})

class AppComponent {
    myName: string;
    names: Array<string>;
    constructor() {
        this.myName = "Neil";
        this.names = ["Tom", "Dick", "Harry"];
    }

}
bootstrap(AppComponent);

내가 무엇을 놓치고 있습니까?

---

알파 52를 사용하는 경우 GitHub 리포지토리 에서 CHANGELOG.md 를 확인하십시오 . 그들은 (다른 모든 지시문과 유사 ) ngFor대신에 대소 문자를 구분하도록 템플릿을 변경했습니다.ng-for

같은 요소 이름 <router-outlet>은 맞춤 요소의 태그 이름에 대시가 필요한 맞춤 요소 사양과 호환되도록 변경되지 않았습니다.

In >= RC.5 (and final) ngFor and similar directives are not ambient by default. They need to be provided explicitly like

@NgModule({
  imports: [CommonModule],

or if you don't mind the module being locked to be browser-only

@NgModule({
  imports: [BrowserModule],

The BrowserModule exports CommonModule like also WorkerAppModule does.

Update

The BrowserModule should be imported in the app module, in other modules CommonModule should be imported instead.

---

With Angular 2.1.0+

It seems this is the same except you should import the BrowserModule in your app module and import CommonModule in others (you can't import BrowserModule twice with routes lazy-loading).

With Angular 2 rc5 :

This version introduced NgModules, you need to import BrowserModule in your module(s) in order to use ngFor, and ngIf:

BrowserModule registers critical application service providers. It also includes common directives like NgIf and NgFor which become immediately visible and usable in any of this modules component templates.

example:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';


@NgModule({
  imports: [BrowserModule],
  providers: [],
  exports: [],
  declarations: []
})
export class MyModule { }

---

In Angular2 beta ng-for isn't correct. it should be *ngFor.

---

ngIf and ngFor are declared in CommonModule from @angular/common.

CommonModule contributes many of the common directives that applications need including ngIf and ngFor.

BrowserModule imports CommonModule and re-exports it. The net effect is that an importer of BrowserModule gets CommonModule directives automatically.

update your code as follow

import { CommonModule } from '@angular/common';

@NgModule({
imports: [CommonModule]
})
// In HTML
<li *ngFor="let customer of customers">{{customer.name}}</tr>

for more information Angular Module

---

The syntax for the ngFor directive is

<tr *ngFor="let name of names">{{name}}</tr>

Notice that is no longer #name of names as it was but let name of names and the ngFor requires the * and is case sensitive.

---

Behind the other answers, another possible cause is that you use some html formatter-repacker which converts all of your HTML - including the component templates - into lowercase.

The Angular template substitution is case sensitive for the ngFor and ngIf tags, at least today, but I can't say anything for sure for the next week.

Particularly webpack plugins, for example htmljs or html-minify work badly as their convert everything to lowercase on their default setting. Doublecheck the HTML code in the compiled text, it may be with all lowercase (like *ngif=...), which won't be accepted, even if in your original source is it correct!

Of course it breaks the HTML5 standard.

It happens because our most wonderful angular2 development thinks "they wish to follow html5 more closely", but there are always some surprising exceptions, making the work with angular2 always better and better.

---

It also might be caused by a typo. I just faced this problem I had

<div class="row" *ngFor="let order or orders">

As you see there is let order or orders instead of let order of orders

---

Be careful of the typo: it's

*ngFor

• not ng-for
• not ngfor
• not ng-For

---

Given that it has had so much success on the other issue marked as a duplicate of this one, here is a response of mine that has received a lot of upvotes:

Just for anyone who is missing it, I also had an issue where I typed ngif rather than ngIf (notice the capitol 'I').

---

My problem was caused by a missing export of the component containing the *ngFor. This component (MyComponentWithNgFor) was already imported and declared inside my SharedModule. The SharedModule also imported Angular's CommonModule, so everything looked fine.

However, I was using my component with the *ngFor in another module - let's call it ModuleB - which was importing SharedModule, so that I could use MyComponentWithNgFor.

My solution was simply to add my component containing the *ngFor to my SharedModule's exports array, like so:

@NgModule({
  imports: [ CommonModule ],
  declarations: [ MyComponentWithNgFor ],
  exports: [ MyComponentWithNgFor ]
})
export class SharedModule { }

This made it possible for my ModuleB (which imports SharedModule) to use MyComponentWithNgFor.

참고URL : https://stackoverflow.com/questions/34228971/cant-bind-to-ng-forof-since-it-isnt-a-known-native-property