angular2の1つのコンポーネントから他のコンポーネントへデータを渡すことができません

Question

これは単純な再利用可能なデータテーブルコンポーネントを作成しようとしている非常に基本的な設定です。しかし、それは動作しません。

data_table.component.ts：

import { Component, Input } from '@angular/core'; 
import { CORE_DIRECTIVES } from '@angular/common'; 
import {Router, RouteConfig, RouterLink, RouterOutlet, ROUTER_PROVIDERS, ROUTER_DIRECTIVES} from '@angular/router-deprecated'; 
import {TAB_DIRECTIVES} from 'ng2-bootstrap'; 
@Component({ 
    selector: 'data_table', 
    templateUrl: './data_table/data_table.html', 
    directives: [RouterLink, RouterOutlet, ROUTER_DIRECTIVES, TAB_DIRECTIVES], 
    providers: [ROUTER_PROVIDERS] 
}) 
export class DataTableComponent { 
    @Input() 
    rows: Array<any>; 
} 

data_table.html：

<table> 
    <thead> 
     <tr> 
      <td>sr</td> 
      <td>name</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="let row in rows"> 
      <td>{{row.sr}}</td> 
      <td>{{row.name}}</td> 
     </tr> 
    </tbody> 
</table> 

employee.component.ts：

import { Component} from '@angular/core'; 
import { CORE_DIRECTIVES } from '@angular/common'; 
import {Router, RouteConfig, RouterLink, RouterOutlet, ROUTER_PROVIDERS, ROUTER_DIRECTIVES} from '@angular/router-deprecated'; 
import {DataTableComponent} from '../../data_table/data_table.component'; 

const Emps: Array <any> = [{ 
    sr: 1, 
    name: 'saurabh' 
}, { 
    sr: 2, 
    name: 'arun' 
}]; 

@Component({ 
    selector: 'employee', 
    templateUrl: './app/employee/employee.html', 
    directives: [DataTableComponent, RouterLink, RouterOutlet, ROUTER_DIRECTIVES], 
    providers: [ROUTER_PROVIDERS] 
}) 

export class EmployeeComponent { 
    emps = Emps; 
} 

employee.html：

<div> 
    <data-table [rows]="emps"></data-table> 
</div> 

私は、コンソール内の任意のエラーを持っていないが、行は人口が取得されていません。

Answer 1

コードに入力ミスがありますか？

あなたDataTableComponentは間違っselectorを持っているし、あなたのテンプレートの中にあなたのforループ文の代わりにinにof演算子を使用する必要があります。

したがって、次の行に変更してみてください：

@Component({ 
    selector: 'data-table', <== '_' => '-' 

<tr *ngFor="let row of rows"> <== 'in' => `of' 

を