获得mat-row角4

Question

我有一个mat-table，现在我想获得Clicked行的ViewContainerRef，这样我就可以在该行中添加另一个组件。你能否告诉我获取行的ViewContainerRef的最佳方法。

目前我正在使用ViewChildren使用myRow作为mat-row的ID。

@ViewChildren("myRow", { read: ViewContainerRef }) containers;

我在点击该行时传递索引。

<mat-row #myRow *matRowDef="let row; columns: colInfo;let index=index" 
            (click)="expandRow(index, row)"></mat-row>

根据索引，我将获取ViewContainerRef，如

const container = this.containers.toArray()[index];

并创建如下组件。

const factory = this.resolver.resolveComponentFactory(DetailTableComponent);
const component = container.createComponent(factory);  

如果我不对表进行排序，它可以正常工作。一旦我执行排序，组件就会在不同的行上随机添加，原因有两个 1.一旦我进行排序，索引就会更新（它总是按行的顺序从0到n设置）
2. ViewContainerRef仍然具有旧数据，即排序前的数据。

如果上述两个问题中的任何一个得到解决，那么我相信我的问题将得到解决。 要么 如果我可以获得点击的ViewContainerRef，那么我也相信我的问题将得到解决。

请帮忙。

Answer 1

我一直在努力解决如何从模板中获取特定ViewContainerRef的问题。我现在能想到的最简单的解决方案：

更改此

expandRow(index, row)

到

expandRow(index, row, myRow)

这是将myRow作为nativeElement传递。

然后，而不是

const container = this.containers.toArray()[index];

写

const containers = this.containers.toArray();

从那里你应该能够进行查找以找到索引i

containers[i].element.nativeElement === myRow