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