我正在研究一个主要由三件事组成的网格组件 GridComponent 组件,它接受一个数组数据源,一个 RowItem 指令,它只负责为一行创建一个上下文,一个 ColumnComponent 是列的内容的定义。
简而言之,组件的使用情况如下:
<my-grid [data-source]="dataSource">
<ng-container *rowItem="let item">
<my-column column-header="Person">
{{item.name}}
</my-column>
<my-column column-header="Age">
{{item.age}}
</my-column>
<my-column column-header="Car">
{{item.car}}
</my-column>
</ng-container>
</my-grid>
现在,我的列定义如下:
<ng-container *ngIf="someConditionHere">
<ng-content></ng-content>
</ng-container>
将收集开发人员指定的内容并传递到网格,然后网格将负责渲染完整控件,如下面的模板所示。
<table>
<thead>
<tr>
<th *ngFor="let col of columns">
{{col.columnHeader}}
</th>
</tr>
</thead>
<tbody>
<tr class="core-grid-row" *ngFor="let row of dataSource">
<ng-template [ngTemplateOutlet]="rowItem" [ngOutletContext]="{$implicit: row}"></ng-template>
</tr>
</tbody>
</table>
我现在遇到的问题与渲染列名有关。我正在尝试使用下面的ContentChildren收集名称
@ContentChildren(ColumnComponent)
public columns: QueryList<ColumnComponent>;
然而,由于网格中有* ngFor指令,我的ContentChildren查询正在收集列乘以行数,而不是仅收集第一行。有没有我可以收集列名而没有* ngFor的副作用,干净整洁?
谢谢你的时间!
答案 0 :(得分:0)
您可以做的是标记第一行中的列
<tr class="core-grid-row" *ngFor="let row of dataSource; let i = index">
<ng-template [ngTemplateOutlet]="rowItem" [ngOutletContext]="{$implicit: row, 'i: i}"></ng-template>
</tr>
(我不太确定使用ngOutletContext传递索引的代码风格,......也许它有点不同)
然后您可以使用索引标记第一列:
<ng-container *ngIf="i == 0 && someConditionHere" #headerColumn>
<ng-content></ng-content>
</ng-container>
<ng-container *ngIf="i > 0 && someConditionHere">
<ng-content></ng-content>
</ng-container>
然后你应该能够通过以下方式获取第一行列:
@ContentChildren(#headerColumn)
public columns: QueryList<ColumnComponent>;
答案 1 :(得分:0)
我设法通过将容器包装在my-row
组件而不是ng-container
中来解决此问题。像这样,我可以直接访问组件。但是仍然使用该指令来创建上下文变量。