滚动到 Angular 中的表格行

Question

我使用 Angular 和 PrimeNG 来显示表格。我希望发生的是，当页面加载或路由片段更改时，表格将滚动到相应的行。例如，如果 URL 以

/data?dataId=x#LC_8

结尾，则应滚动到 id 为

LC_8

的行。

现在我有下一个

typescript

文件：

export class DataComponent {

    @ViewChild('dataTable', {static: true}) dataTable: Table;

    data: Data[];
    selectedData: Data;

    constructor(private DataService: DataService, private route: ActivatedRoute) {
        this.route.fragment.subscribe(() => {
            let index: string = this.route.snapshot.fragment;
            this.highlightRow(index);
            this.scrollToSelectedRow();
        });
    }

    ngOnInit(): void {
        this.getData();
    }

    private getData(): void {
        const dataId: string = this.route.snapshot.queryParamMap.get('dataId');
        let index: string = this.route.snapshot.fragment;
        this.dataService.getData({dataId}, new HttpContext()).subscribe(
            data => {
                this.data = data;
                this.highlightRow(index);
                this.scrollToSelectedRow();
            });
    }

    private highlightRow(index: string) {
        if (index) {
            index = index.slice(3);
            this.selectedData = this.data.find(
                d => d.id.toString() == index);
        }
    }

    private scrollToSelectedRow() {
        if (this.selectedData && this.dataTable) {
            const rowIndex = this.data.findIndex(lc =>
                d.dataId === this.selectedData.id);
            if (rowIndex !== -1) {
                this.dataTable.scrollTo(rowIndex);
            }
        }
    }

}

还有下一个

HTML

：

<h3>Data</h3>

<p-table #dataTable [value]="data" selectionMode="single" [(selection)]="selectedData">
    <ng-template pTemplate="header">
        <tr>
            <th>ID</th>
            <th>Info</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-data>
        <tr [pSelectableRow]="data" id="LC_{{data.id}}">
            <td>{{data.id}}</td>
            <td>{{data.info}}</td>
        </tr>
    </ng-template>
</p-table>

我也尝试过使用

ngAfterViewInit()

，但这没有帮助。

Answer 1

类型断言（如果您知道类型）：

如果您确定 data.list 中的元素是具有 valeur 属性的对象，则可以使用类型断言来告诉编译器实际类型。

<td class="align-middle" *ngFor="let valuerDuHier of data.list | slice:0:16; let i=index">
  <b>{{ (valuerDuHier as any)?.valeur }}&nbsp;</b>
</td>