无法将数据从一个组件传递到angular2中的另一个组件

Question

这是非常基本的设置，我试图在其中创建一个简单的可重用数据-table 组件。但是它不起作用。

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 循环语句中使用 of 运算符而不是 in.

因此尝试更改以下行：

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

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

无法将数据从一个组件传递到angular2中的另一个组件

Not able to pass data from one component to other in angular2

javascript

typescript

angular2-template

angular