Question

resiableColumns和reorderbleColumns的默认值为“true”。我想要尝试的是从ngOnInit（）中的initdata文件中获取'true'或'false'，将这些init值设置为p-table指令中的resizableColumns和reorderbleColumns属性。

如何从组件更新resizableColumns和reorderbleColumns？

⬇︎这是我的代码无法正常工作⬇︎

在这里调用gridtable.component.html

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

make initfile并调用gridtable组件

[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在这里。我在此html中将resizableColumns和resizableColumns默认值设置为true。

[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;
    }
}

Answer 1

如果我已经很好地理解了您的问题，您可以通过设置变量来修复它，而不是像您一样将resizableColumns指定为true。

换句话说，将[resizableColumns]="true"替换为[resizableColumns]="reorderable"，并在构造函数中将reorderable变量指定为true。

然后，在读取文件设置后，为此变量分配新值。

这是一个有效的Plunker

如何从组件更新Primeng Turbotable ReorderableColumns和ResizableColumns值？

1 个答案: