相关疑难解决方法(0)

Angular2表行作为组件

我正在尝试使用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)

我怎样才能做到这一点?

angular

87
推荐指数
4
解决办法
6万
查看次数

如何在 Angular 7 的表中添加行组件?

我使用最新版本的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)

javascript components angular

4
推荐指数
1
解决办法
3567
查看次数

标签 统计

angular ×2

components ×1

javascript ×1