0

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

如何从组件更新 resizableColumns 和 reorderbleColumns？

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

在这里调用 gridtable.component.html

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

制作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;
    }
}
4

1 回答 1

1

如果我很好地理解了您的问题，您可以通过设置变量而不是resizableColumns像您所做的那样分配给 true 来解决它。

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

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

这是一个工作的Plunker

于 2018-02-16T08:19:00.203 回答