我正在尝试使用angular2 2.0.0-beta.0
我有一个表格,行内容由angular2以这种方式生成:
<table>
<tr *ngFor="#line of data">
.... content ....
</tr>
</table>
Run Code Online (Sandbox Code Playgroud)
现在这个工作,我想将内容封装到一个组件"table-line".
<table>
<table-line *ngFor="#line of data" [data]="line">
</table-line>
</table>
Run Code Online (Sandbox Code Playgroud)
在组件中,模板具有<tr> <td>内容.
但是现在桌子不再有用了.这意味着,内容不再显示在列中.在浏览器中,检查器向我显示DOM元素如下所示:
<table>
<table-line ...>
<tbody>
<tr> ....
Run Code Online (Sandbox Code Playgroud)
我怎样才能做到这一点?
我使用最新版本的angluar。(7.2.0) 我有个人 tr 组件,如:
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-table-row',
templateUrl: './table-row.component.html',
styleUrls: ['./table-row.component.scss']
})
export class TableRowComponent implements OnInit {
@Input() character: any;
@Input() columns: string[];
constructor() { }
ngOnInit() {
}
}
Run Code Online (Sandbox Code Playgroud)
我想在表中使用这个组件,如:
<table class="mat-elevation-z8">
<tr>
<th *ngFor="let c of columns">{{c}}</th>
</tr>
<tr app-table-row class="component-style table-row-component" *ngFor="let ch of characters | async"
[character]="ch"
[columns]="columns">
</tr>
</table>
Run Code Online (Sandbox Code Playgroud)
得到如下错误:
Can't bind to 'character' since it isn't a known property of 'tr'. ("table-row class="component-style table-row-component" *ngFor="let …Run Code Online (Sandbox Code Playgroud)