-1
これは単純な再利用可能なデータテーブルコンポーネントを作成しようとしている非常に基本的な設定です。しかし、それは動作しません。angular2の1つのコンポーネントから他のコンポーネントへデータを渡すことができません
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>
私は、コンソール内の任意のエラーを持っていないが、行は人口が取得されていません。