Nicht möglich, Daten von einer Komponente zu anderen in angular2 zu übergeben

Question

Dies ist sehr grundlegende Einrichtung, wo ich versuche, eine einfache wiederverwendbare Datentabelle Komponente zu erstellen. Aber es funktioniert nicht.

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> 

Ich habe keine Fehler in der Konsole, aber die Zeilen nicht aufgefüllt zu werden.

Answer 1

Ich quess Sie haben einige Tippfehler in Ihrem Code.

Ihre DataTableComponent haben eine falsche selector und innerhalb Ihrer Vorlage benötigen Sie of Operator in Ihrer for-Schleife-Anweisung anstelle von in zu verwenden.

versuchen also folgende Zeilen zu ändern:

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

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