自定義屬性綁定@Input不起作用

Question

我正在一個component創建自定義屬性，我想通過@Input（）在另一個component訪問它，但是在第二個組件中什么也沒顯示，甚至不顯示result（custom property）的初始值，我都沒有得到任何錯誤在控制台中，我還在線搜索了解決方案，找到了一些解決方案，但無法使其正常工作。

請幫幫我，這是我的代碼 。

用戶在評論中創建的Demo Plunker 。

property-binding-component.ts（子級）

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

@Component({
  selector: 'app-property-binding',
  template: `
      {{result}} //value working here 
  `,
  styles: []
})
export class PropertyBindingComponent{
   @Input() result: number = 5000; 
}

UPDATED databindings-components.ts（父級）

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

@Component({
  selector: 'app-databindings',
  templateUrl: './databindings.component.html',
  styleUrls: ['./databindings.component.css']
})
export class DatabindingsComponent {
}

databindings-component.html（父）

<app-property-binding [result]="300">   </app-property-binding>
//not working here not event showing the value `5000`

app.module.ts

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

import { AppComponent } from './app.component';
import { DatabindingsComponent } from './databindings/databindings.component';
import { PropertyBindingComponent } from './databindings/property-binding.component';

@NgModule({
  declarations: [AppComponent, DatabindingsComponent, PropertyBindingComponent ],
  imports: [
  BrowserModule,
  FormsModule,
  HttpModule
 ],
  providers: [],
  bootstrap: [AppComponent]
 })
 export class AppModule { }

謝謝

Answer 1

Plunker演示工作正常。 我在猜測原因：

檢查您的本地設置。

1. 檢查“ app.module.ts”文件，查看導入和聲明部分是否有錯字。
2. 檢查“ property-binding-component.ts”文件（您在問題中鍵入的內容）的拼寫，該文件應為“ property-binding.component.ts”。
3. 檢查您的“ databindings-component.html”文件，並再次檢查選擇器名稱是否匹配。 （因為您甚至看不到“ 5000”）。