angular - 使用无模板标签在 Angular 中托管递归组件
问题描述
我在 Angular 中创建了一个递归组件my-row,这意味着它会为我的树数据结构的每一级调用自身多次,
组件my-row的模板:
<ng-container [pReorderableRow]="rowIndex" *ngIf="level === this.groupingLevels.length else child_row">
<tr>
<td [attr.rowspan]="rowGroupMetaData.indexes.length">
{{rowGroupMetaData.source[col]}}
</td>
</tr>
</ng-container>
<ng-template #child_row>
<my-row *ngFor="let metaKey of getKeys(); index as i;"
[rowGroupMetaData]="rowGroupMetaData.children[metaKey]"
>
</my-row>
</ng-template>
我在我的桌子的身体里叫它如下:
<p-table
[value]="[{}]"
[columns]="cols"
[reorderableColumns]="true"
(onColReorder)="onColReorder($event)"
>
<ng-template pTemplate="header" let-columns>
<tr>
<th>
{{col}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowIndex="rowIndex" let-columns>
<my-row *ngFor="let metaKey of getKeys(rowGroupMetadata)"
[rowGroupMetaData]="rowGroupMetadata[metaKey]"></my-row>
</ng-template>
</p-table>
问题是我不能在 tbody 和它的 tr 之间放置任何标签,否则它不会出现,但我可以在它们之间使用ng-container或ng-template,因为它们不会影响结构。
在发现我试图将我的组件作为ng-container / ng-template中的指令托管后:
<ng-container my-row
*ngFor="let metaKey of getKeys(rowGroupMetadata)"
[rowGroupMetaData]="rowGroupMetadata[metaKey]"
></ng-container>
但不幸的是,我有错误说ng-container没有用作主机,也没有ng-template。
您能否提供一些我可以用于托管或其他解决方案的其他潜在组件。
解决方案
您可以尝试以下方法
在 MyRowComponent 中更改 Component 装饰器中的选择器,以便它允许您使用类似于指令的组件
@Component({
selector: '[my-row]', // instead of just 'my-row'
templateUrl: './my-row.component.html',
})
在表格的正文中进行以下更改:
<ng-template pTemplate="body" let-rowIndex="rowIndex" let-columns>
// host my-row directly on a tr element
<tr my-row *ngFor="let metaKey of getKeys(rowGroupMetadata)"
[rowGroupMetaData]="rowGroupMetadata[metaKey]"></tr>
</ng-template>
在 my-row 的模板中
<ng-container [pReorderableRow]="rowIndex" *ngIf="level === this.groupingLevels.length else child_row">
// if not child element, only show td as the host element is tr itself
<td [attr.rowspan]="rowGroupMetaData.indexes.length">
{{rowGroupMetaData.source[col]}}
</td>
</ng-container>
<ng-template #child_row>
<tr my-row *ngFor="let metaKey of getKeys(); index as i;"
[rowGroupMetaData]="rowGroupMetaData.children[metaKey]"
>
</tr my-row>
</ng-template>
推荐阅读
- google-crawlers - 我们如何告诉 Google 的爬虫在其移动可用性分析中忽略所有具有特定 URL 变量的页面?
- angular - ASP.Net Core 2.2 和 Angular 7+ 应用程序的身份验证
- javascript - Microsoft Dynamics CRM 中来自 Web API 的查找字段格式化值未定义(无法获取格式化值)
- android - 基于旧应用创建新的 Android 应用
- python - 如何使用引导模式在 Django 中使用基于类的视图删除对象?
- r - 计算并将值添加到数据框
- django - 将初始值传递给使用 TinyMCE 小部件的表单 CharField 时,“CharField”对象没有属性“is_hidden”
- dynamics-crm - 使用从 Dynamics CRM 中的相关实体查找的值填充文档模板
- reactjs - 循环通过 mapbox getDirections 来填充路由数组
- android - 解析 Json 时无法弄清楚标头身份验证的工作原理