如何在自定义表格组件中使用子模板来显示每一行?
Posted
技术标签:
【中文标题】如何在自定义表格组件中使用子模板来显示每一行?【英文标题】:How to use a child template inside a custom table component to display each row? 【发布时间】:2017-11-19 15:01:52 【问题描述】:我尝试了很多东西,但都失败了,我的代码最终变得一团糟。 我对任何事情都持开放态度,但如果你想要一个基地:
我发现最有前途的方法如下,但失败了,出现异常“templateRef.createEmbeddedView is not a function”:
app.component.html
<br>
<mt-table [fields]="userFields" [(rows)]="users" [pageSize]="10" [searchString]="searchString"
class="round">
<template let-row="row">
<td>
row.name
</td>
<td>
<i class="fa fa- row.gender === 'male' ? 'mars' : 'venus' "></i>
</td>
<td>
row.email
</td>
<td>
row.phone
</td>
<td>
row.address.number
</td>
<td>
row.address.street
</td>
<td>
row.address.city
</td>
<td>
row.address.state
</td>
<td align="center">
<span class="actions show-on-tr-hover">
<i class="fa fa-pencil-square opacity-on-hover"></i>
<i class="fa fa-minus-square opacity-on-hover"></i>
</span>
</td>
</template>
</mt-table>
mtTable.component.html
<thead *ngIf="fields?.length">
<tr>
<th
*ngFor="let field of fields"
[ngClass]=" 'sortable': field.isSortable "
(click)="activateColumn(field)">
field.label
<span *ngIf="field.isSortable" class="sorting">
<div class="arrow" [ngClass]=" 'active-sorting': field === activeColumn && !field.reverseOrder ">▲</div>
<div class="arrow" [ngClass]=" 'active-sorting': field === activeColumn && field.reverseOrder ">▼</div>
</span>
</th>
</tr>
</thead>
<tbody *ngIf="rows?.length">
<tr *ngFor="let row of getPaginatedRows()"
(click)="onRowClick(row)" class="clickable">
<template [ngTemplateOutlet]="rowTemplate" [ngOutletContext]=" row: row "></template>
</tr>
</tbody>
<tfoot *ngIf="pageSize">
<tr>
<td [attr.colspan]="fields?.length">
<mt-table-pagination
[rows]="getProcessedRows()"
[pageSize]="pageSize"
[(output)]="pagination">
</mt-table-pagination>
</td>
</tr>
</tfoot>
</table>
你们中有人知道为什么会失败或知道任何可能的替代方法吗?
【问题讨论】:
此处未发布的所有其他内容都可以正常工作,直接将模板内容复制到 mtTable.component.html 会按预期填充表格。无论如何,请随时请求您可能感兴趣的任何其他代码(或直接查看github repo)。 感谢您的 github 回购 【参考方案1】:我会替换
@ViewChildren(TemplateRef) rowTemplate: TemplateRef<any>;
与
@ContentChild(TemplateRef) rowTemplate: TemplateRef<any>;
因为我想使用 Light DOM 中的模板
另见
What's the difference between @ViewChild and @ContentChild?【讨论】:
所以我认为 ViewChildren 只寻找呈现的 html 而 ContentChild 寻找 html 而不管它是否被呈现?无论如何,我仍然得到完全相同的异常。 是的,ContentChild
查看父组件中组件标签之间的内容
我很抱歉。我错误地将其更改为 ContentChildren。它现在可以正常工作。你有我最深切的感谢。以上是关于如何在自定义表格组件中使用子模板来显示每一行?的主要内容,如果未能解决你的问题,请参考以下文章