angular-cli：データバインディング中のエラー<> @Inputプロパティがnullです

Question

これについてのすべてのフォーラムを読みましたが、まだこれを動作させることはできません。 私は1つの親コンポーネントを持ち、複数の子コンポーネントをロードしたい（それぞれに異なる入力パラメータを渡す）。

私のアプリケーションは、以下の方法の設定です：

• 私app.componentは、3つのサブコンポーネントがあります：ヘッダー、コンテンツ（私もまだ実装されていない）&フッターを。
• Headerコンポーネントで繰り返す必要がある別のコンポーネントがあるので、Headerコンポーネント内でのみ使用するためにChildコンポーネントを作成しました。以下は

ALL MY CODEです：

---

app.module.ts

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

import { AppComponent } from './app.component'; 
import { HeaderComponent } from './header/header.component'; 
import { FooterComponent } from './footer/footer.component'; 
import { ChildComponent } from './child/child.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    HeaderComponent, 
    FooterComponent, 
    ChildComponent 
    ], 
    imports: [ 
    BrowserModule, 
    HttpModule 
    ], 
    providers: [ 

    ], 
    bootstrap: [ 
    AppComponent, 
    HeaderComponent, 
    FooterComponent, 
    ChildComponent 
    ] 
}) 

export class AppModule { } 

---

app.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    template: ` 
    <header class="container-fluid"> 
    <app-header></app-header> 
    </header> 

    <content class="container-fluid"> 
    </content> 

    <footer class="container-fluid"> 
    <app-footer></app-footer> 
    </footer>` 
}) 

export class AppComponent { } 

---

header.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-header', 
    template: ` 
    <div> 
    <h2>HEADER</h2> 
    <app-child [code]="'1st value'"></app-child><br> 
    <app-child [code]="'2nd value'"></app-child><br> 
    <app-child [code]="'3rd value'"></app-child> 
    </div>` 
}) 

export class HeaderComponent { } 

---

footer.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-footer', 
    template: `<div><h2>FOOTER</h2></div>` 
}) 

export class FooterComponent { } 

---

child.component.ts

import { Component, Input } from '@angular/core'; 

@Component({ 
    selector: 'app-child', 
    template: `<div>Hello World! {{this.code}}</div>` 
}) 

export class ChildComponent { 
    @Input() code: string; 
} 

---

しかし、いくつかの理由で、バインディングは最初の子コンポーネントのために動作しません。出力は次のとおりです。私は私のフッターのコンポーネントを削除する場合

Hello World! 
Hello World! 2nd value 
Hello World! 3rd value 

は、問題をさらに混乱させるために、これは動作します...まだフッターコンポーネントは、私のヘッダーコンポーネントまたはそのにどのような方法で関連していません子コンポーネント

誰かが、なぜこれが最初のオカレンスで失敗するのですか？他のすべてのバインディングで正常に動作する理由を理解できますか？

角度の特性：任意の助けを事前に

_      _     ____ _  ___ 
/\ _ __ __ _ _ _| | __ _ _ __ /___| | |_ _| 
/△ \ | '_ \/_` | | | | |/ _` | '__| | | | | | | 
/___ \| | | | (_| | |_| | | (_| | |  | |___| |___ | | 
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_|  \____|_____|___| 
       |___/ 
@angular/cli: 1.2.1 
node: 6.10.0 
os: win32 x64 
@angular/animations: 4.2.6 
@angular/common: 4.2.6 
@angular/compiler: 4.2.6 
@angular/compiler-cli: 4.2.6 
@angular/core: 4.2.6 
@angular/forms: 4.2.6 
@angular/http: 4.2.6 
@angular/platform-browser: 4.2.6 
@angular/platform-browser-dynamic: 4.2.6 
@angular/platform-server: 4.2.6 
@angular/router: 4.2.6 
@angular/cli: 1.2.1 
@angular/language-service: 4.2.6 

感謝。

Answer 1

コードをコピーしましたが、指定したエラーを再現できませんでした。あなたが欠けているものが他にもあるかどうか確認してください。