在 Angular 指令中获取 table header 行中的列索引

Question

我有一个指令允许用户更改 table:

中列的宽度

<table id="mytable">    
     <thead>
            <tr>
                <th [ktResizeColumn]="true" id="myth">
           <tr>
     <thead>
</table>

我想在更改后将列宽保存在本地存储中。我的问题是我需要知道 th 的索引被更改，直到现在我必须使用 th 的 id，我想摆脱它。我的指令：

import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';

@Directive({
    selector: '[ktResizeColumn]',
})
export class ResizeColumnDirective implements OnInit {
    @Input('ktResizeColumn') resizable: boolean;
    private startX: number;
    private startWidth: number;
    private column: HTMLElement;
    private table: HTMLElement;
    private pressed: boolean;
    private width: any;
    private lsKey = 'tableState_';

constructor(private el: ElementRef, private renderer: Renderer2) {
    this.column = this.el.nativeElement;
}

ngOnInit() {
    if (this.resizable) {
        const row = this.renderer.parentNode(this.column);
        const thead = this.renderer.parentNode(row);
        this.table = this.renderer.parentNode(thead);

        const resizer = this.renderer.createElement('span');
        this.renderer.addClass(resizer, 'resize-holder');
        this.renderer.appendChild(this.column, resizer);
        this.renderer.listen(resizer, 'mousedown', this.onMouseDown);
        this.renderer.listen(this.table, 'mousemove', this.onMouseMove);
        this.renderer.listen('document', 'mouseup', this.onMouseUp);
    }

    this.getTableState();
}

saveTableState() {
    if (this.table.id && this.column.id) {
        const model = {
            columnId: this.column.id, //I need column index here
            width: this.width,
        };
        let arr = [];
        const storageData = localStorage.getItem(this.lsKey + this.table.id);

        if (storageData) {
            arr = JSON.parse(storageData);
            arr.forEach((item, index) => {
                if (item.columnId === model.columnId) {
                    arr.splice(index, 1);
                }
            });
        }

        arr.push(model);
        localStorage.setItem(this.lsKey + this.table.id, JSON.stringify(arr));
    }
}

}

Answer 1

<table id="mytable">    
     <thead>
            <tr>
                <th [ktResizeColumn]="true" [ktResizeColumnIndex]="1" id="myth">
           <tr>
     <thead>
</table>

import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';

@Directive({
    selector: '[ktResizeColumn]',
})
export class ResizeColumnDirective implements OnInit {
    @Input('ktResizeColumn') resizable: boolean;    
    @Input('ktResizeColumnIndex') columnIndex:number;

    private startX: number;
    private startWidth: number;
    private column: HTMLElement;
    private table: HTMLElement;
    private pressed: boolean;
    private width: any;
    private lsKey = 'tableState_';

constructor(private el: ElementRef, private renderer: Renderer2) {
    this.column = this.el.nativeElement;
}

ngOnInit() {
    if (this.resizable) {
        const row = this.renderer.parentNode(this.column);
        const thead = this.renderer.parentNode(row);
        this.table = this.renderer.parentNode(thead);

        const resizer = this.renderer.createElement('span');
        this.renderer.addClass(resizer, 'resize-holder');
        this.renderer.appendChild(this.column, resizer);
        this.renderer.listen(resizer, 'mousedown', this.onMouseDown);
        this.renderer.listen(this.table, 'mousemove', this.onMouseMove);
        this.renderer.listen('document', 'mouseup', this.onMouseUp);
    }

    this.getTableState();
}

saveTableState() {
    if (this.table.id && this.column.id) {
        const model = {
            columnId: this.column.id, //I need column index here
            width: this.width,
        };
        let arr = [];
        const storageData = localStorage.getItem(this.lsKey + this.table.id);

        if (storageData) {
            arr = JSON.parse(storageData);
            arr.forEach((item, index) => {
                if (item.columnId === model.columnId) {
                    arr.splice(index, 1);
                }
            });
        }

        arr.push(model);
        localStorage.setItem(this.lsKey + this.table.id, JSON.stringify(arr));
    }
}

也许你可以这样试试？但我没有尝试，所以我不确定这种方式是否正确

Answer 2

它应该像这样工作：

const model = {
    columnId: Array.from(this.renderer.parentNode(this.column).children).indexOf(this.column),
    width: this.width,
};

在 Angular 指令中获取 table header 行中的列索引

Get column index in table header row in Angular directive

javascript

typescript

angular-directive

angular