angular-cli: 数据绑定时出错 <> @Input 属性为空

Question

我已经阅读了所有关于此的论坛，但仍然无法正常工作。我有 1 个父组件，想在其中加载几个子组件（为每个组件传递不同的输入参数）。

我的应用程序设置如下：

我的 app.component 将有 3 个子组件：页眉、内容（我还没有实现）和页脚；
我的 Header 组件中还有一个组件需要重复，所以我创建了一个 Child 组件（仅在 Header 组件中使用）；

以下是我的全部代码：

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 属性：

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@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

我复制了您的代码，但无法重现您指定的错误。你能检查一下你是否还遗漏了什么吗？

angular-cli: 数据绑定时出错 <> @Input 属性为空

angular-cli: Error during data binding <> @Input property is null

data-binding

angular-cli

input-parameters

angular-cli: 数据绑定时出错 <> @Input 属性 为空

angular-cli: Error during data binding <> @Input property is null

data-binding

angular-cli

input-parameters

angular-cli: 数据绑定时出错 <> @Input 属性为空