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

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

이 질문에는 이미 다음과 같은 답이 있습니다.

'ngForOf'는 'tr'의 알려진 속성이 아니므로 바인딩할 수 없습니다(최종 릴리스). (40개 답변)

마감됨3년 전에.

여기서는 기본적인 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 repo에서 CHANGELOG.md 을 확인하십시오.그들은 템플릿을 대소문자를 구분하도록 변경했습니다.ngFor에 ng-for지시어와 ) (다른든모지대해도유서사함침에)

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

>= RC.5(및 최종)에서 ngFor및 유사한 지시사항은 기본적으로 주변 환경이 아닙니다.▁explicit▁they처럼 명시적으로 제공되어야 합니다.

@NgModule({
  imports: [CommonModule],

또는 모듈이 브라우저 전용으로 잠기는 것을 개의치 않는 경우

@NgModule({
  imports: [BrowserModule],

수출도 마찬가지입니다.

갱신하다

그BrowserModule앱 모듈, 다른 모듈로 가져와야 합니다.CommonModule대신 가져와야 합니다.

Angular 2.1.0+ 포함

당신이 그것을 가져와야 한다는 것을 제외하고는 이것은 동일한 것 같습니다.BrowserModule 및 할 수 .CommonModule다른 경우(레이지 로드 경로에서는 브라우저 모듈을 두 번 가져올 수 없음).

각도 2rc5 포함:

이 버전에는 NgModules가 도입되었습니다. 가져와야 합니다.BrowserModule에서 를 사용하기 ngFor,그리고.ngIf:

브라우저 모듈은 중요한 응용 프로그램 서비스 공급자를 등록합니다.또한 NgIf 및 NgFor와 같은 일반적인 명령어가 포함되어 있으며 이 명령어는 모듈 구성요소 템플릿에서 즉시 표시되고 사용할 수 있습니다.

예:

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


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

Angular2에서ng-for아닙니다.그럴 것 같네요.*ngFor.

ngIf 및 ngFor는 CommonModule에서 @angular/common으로 선언됩니다.

CommonModule은 ngIf 및 ngFor를 포함하여 응용 프로그램에 필요한 많은 공통 지시어를 제공합니다.

브라우저 모듈이 CommonModule을 가져와서 다시 내보냅니다.따라서 브라우저 모듈 가져오기 도구는 CommonModule 지시사항을 자동으로 가져옵니다.

코드를 다음과 같이 업데이트합니다.

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

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

자세한 내용은 각도 모듈

ngFor 디렉티브의 구문은 다음과 같습니다.

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

이전과 같은 #이름이 아니라 이름과 ngFor의 이름에 *가 필요하며 대소문자를 구분합니다.

다른 답변 뒤에는 구성 요소 템플릿을 포함한 모든 HTML을 소문자로 변환하는 HTML 형식 재포장기를 사용하는 것도 있을 수 있습니다.

는 Angular 템플대자를구분합니다문소체대에 합니다.ngFor그리고.ngIf태그, 적어도 오늘, 하지만 다음 주에 대해서는 확실하게 말할 수 없습니다.

특히 htmljs 또는 html-minify와 같은 웹 팩 플러그인은 기본 설정에서 모든 것을 소문자로 변환하기 때문에 제대로 작동하지 않습니다.컴파일된 텍스트의 HTML 코드를 다시 확인하십시오. 모든 소문자(예:*ngif= 않을 것입니다!...), 원본소스맞허용않지습니다되도더라가!

물론 HTML5 표준을 위반합니다.

우리의 가장 멋진 angular2 개발이 "그들은 html5를 더 가깝게 따르기를 원한다"고 생각하기 때문에 발생하지만, 항상 놀라운 예외가 있어서 angular2를 가진 작업을 항상 더 낫게 만듭니다.

오타로 인해 발생할 수도 있습니다.나는 방금 내가 가지고 있던 이 문제에 직면했습니다.

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

보시다시피 주문 주문 대신 주문 주문 또는 주문이 있습니다.

오타를 조심하세요: 그것은

*ngFor

• 비상식적인
• 에 적합하지 않은
• 비포

앵귤러 8 솔루션

소스 링크

이 문제를 해결하는 방법은 무엇입니까?

이 문제를 해결하려면 응용 프로그램의 기본 모듈(예: app.module.ts 파일)에 BrowserModule을 가져오고 하위 모듈에도 CommonModule을 가져와야 합니다.

가져오기 후 파일은 다음과 같습니다.

app.s.ts.

    // app.module.ts
    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';

    ...
    ...

    @NgModule({
        imports: [
            BrowserModule,
            ....
            ....

아동. 아동. 아동. 아동. 아동. 아동.

    // child.module.ts
    ...
    ...
    import { CommonModule } from '@angular/common';

    @NgModule({
      imports: [
        CommonModule
        ...
        ...

이 문제의 중복으로 표시된 다른 문제에서 큰 성공을 거두었기 때문에, 여기 많은 지지를 받은 저의 답변이 있습니다.

그것을 놓치고 있는 사람을 위해, 나는 ngIf가 아닌 gif를 입력하는 문제도 있었습니다(capital 'I'를 주목하세요).

저의 문제는 *ngFor가 포함된 구성 요소의 내보내기 누락으로 인해 발생했습니다.이 구성 요소(MyComponentWithNgFor)는 이미 내 공유 모듈 내에서 가져와 선언되었습니다.공유 모듈은 Angular의 Common Module도 가져와서 모든 것이 괜찮아 보였습니다.

그러나 공유 모듈을 가져오는 다른 모듈(모듈B라고 부르자)에서 *ngFor와 함께 구성 요소를 사용하여 MyComponentWithNgFor를 사용할 수 있었습니다.

제 솔루션은 *ngFor를 포함하는 구성 요소를 SharedModule의 내보내기 어레이에 다음과 같이 추가하는 것이었습니다.

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

이를 통해 공유 모듈을 가져오는 모듈 B에서 My ComponentWithNgFor를 사용할 수 있게 되었습니다.

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