[英]angular-cli: Error during data binding <> @Input property is null
I've read every single forum about this but still can't get this to work. 我已经阅读了每个论坛的相关内容,但仍然无法正常使用。 I have 1 parent component and want to load a few child components within (passing different input params for each one).
我有1个父组件,并且想在其中加载几个子组件(为每个组件传递不同的输入参数)。
My application is setup the following way: 我的应用程序通过以下方式设置:
Below is ALL MY CODE: 以下是我的所有代码:
app.module.ts 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 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 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 footer.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-footer',
template: `<div><h2>FOOTER</h2></div>`
})
export class FooterComponent { }
child.component.ts 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;
}
But for some reason, the Binding DOESN'T work for the first child component. 但是由于某种原因,绑定不适用于第一个子组件。 The output is:
输出为:
Hello World!
Hello World! 2nd value
Hello World! 3rd value
To make matters more confusing, If I remove my footer component, this works... yet the footer component is not related in any way to my header component or its child component. 更令人困惑的是,如果我删除页脚组件,则可以正常工作……但是页脚组件与我的页眉组件或其子组件没有任何关系。
Can someone help me figure out why the heck this only fails for the 1st occurrence but then works fine for all other bindings? 有人可以帮我弄清楚为什么这只会在第一次出现时失败,然后对所有其他绑定都起作用吗?
Angular properties: 角度特性:
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
@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
Thanks in advance for any help. 在此先感谢您的帮助。
I copied your code, but could not reproduce the error you specified. 我复制了您的代码,但无法重现您指定的错误。 Can you please check if there is anything else you are missing.
您能检查一下您是否还有其他遗漏吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.