Как я могу обновить значение Primeng Turbotable ReorderableColumns и ResizableColumns из компонента?

resiableColumns и reorderbleColumns по умолчанию имеют значение true. Я хочу попробовать получить «true» или «false» из файла initdata в ngOnInit (), установить для этого значения init значение resizableColumns и reorderbleColumns в директиве p-table.

Как я могу обновить resizableColumns и reorderbleColumns из компонента ??

⬇︎ Вот мой код не работает должным образом ⬇︎

вызовите gridtable.component.html здесь

[serialize.component.html]
<grid-table [setting]="setting"></grid-table>

создать файл инициализации и вызвать компонент таблицы сетки

[serialize.component.ts]
@Component({
    selector: 'serialize',
    templateUrl: './serialize.component.html',
    styles: []
})
export class SerializeComponent implements OnInit {
    tableSetting: DataSetting;
    setting: DataSetting;

    constructor() {}

    ngOnInit(): void {
        const reorderableColumns = false;
        const resizableColumns = false;
        this.tableSetting = new DataSetting(resizableColumns, reorderableColumns);
        this.setting = this.tableSetting;
    }
}

html здесь. Я установил значение по умолчанию resizableColumns и resizableColumns как true в этом html.

[gridtable.component.html]
<p-table [columns]="cols" [value]="rows" [resizableColumns]="true" [resizableColumns]="true" (onColResize)="onColResize($event)">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" pReorderableColumn pResizableColumn [ngStyle]="col.style">
                <span *ngIf="col.type === 'text'">
                    {{ col.caption | translate }}
                </span>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns">
                <span *ngIf="col.type === 'text'">
                    {{ rowData[col.fieldName] }}
                </span>
            </td>
        </tr>
    </ng-template>
</p-table>

компонент ниже

[gridtable.component.ts]
@Component({
    selector: 'grid-table',
    templateUrl: './gridtable.component.html',
    styles: []
})
export class TableComponent implements OnInit, AfterViewInit {
    @ViewChild(Table) tableComponent: Table;
    @Input() setting: DataSetting;

    cols: Column[] = [];
    rows: Row[] = [];

    constructor(){}

    ngOnInit(): void {
        this.tableComponent.reset();

        ⬇︎⬇︎⬇︎⬇︎⬇︎⬇︎ this part not working as expected ⬇︎⬇︎⬇︎⬇︎⬇︎⬇︎⬇︎ 
        this.tableComponent.resizableColumns = this.setting.resizableColumns;
        this.tableComponent.reorderableColumns = this.setting.reorderableColumns;
        ⬆︎⬆︎⬆︎⬆︎⬆︎⬆︎⬆︎⬆︎⬆︎⬆︎⬆︎⬆︎⬆︎⬆︎⬆︎⬆︎⬆︎⬆︎⬆︎⬆︎

        // get init col & row data here
        // this cols = get cols here ...
        // tihs rows = get rows here ...
    }

    onColResize(event): void {
       // do something
    }
}

объект данных ниже

[Class]
export class DataSetting {
    resizableColumns: boolean;   // true or false
    reorderableColumns: boolean; // true or false

    constructor(resizableColumns: boolean, reorderableColumns: boolean) {
        this.resizableColumns = resizableColumns;
        this.reorderableColumns = reorderableColumns;
    }
}

person 通りすがりのおっさん    schedule 16.02.2018    source источник


Ответы (1)


Если я хорошо понял вашу проблему, вы можете исправить ее, установив переменную вместо того, чтобы присваивать resizableColumns значение true, как вы это делали.

Другими словами, замените [resizableColumns]="true" на [resizableColumns]="reorderable" и присвойте переменной reorderable значение true в конструкторе.

Затем, после прочтения настроек файла, присвойте этой переменной новое значение.

Вот рабочий Plunker

person Antikhippe    schedule 16.02.2018
comment
большое спасибо. Это то, чем я хотел заниматься. Я ценю это. - person 通りすがりのおっさん; 16.02.2018