I am developing an operation where the user can show and hide the note column by clicking on the button. The hiding works. When unhiding I get the error Cannot find control with unspecified name attribute is output. Can you please help me to solve this problem?
My Code:
// HTML
<button type="button" (click)="showNotes('note')">show</button>
<button type="button" (click)="hideNotes('note')">hide</button>
// TS
private beforeMonthsColumns: EditColumns[] = [
{ attribute: 'accountNumber', name: 'Konto', object: null, disabledRanges: true, disabledAssignment: false },
{ attribute: 'name', name: 'Bezeichnung', object: null, disabledRanges: true, disabledAssignment: false },
{ attribute: 'kagNumber', name: 'KAG', object: null, disabledRanges: false, disabledAssignment: false }
];
private monthColumns: EditColumns[] = [
{ attribute: '1', name: 'Jan', object: 'values', disabledRanges: true, disabledAssignment: false },
{ attribute: '2', name: 'Feb', object: 'values', disabledRanges: true, disabledAssignment: false },
];
private afterMonthsColumns: EditColumns[] = [
{ attribute: 'checkJumpingAccount', name: 'Sp.-Konto', object: null, disabledRanges: false, disabledAssignment: false },
{ attribute: 'note', name: 'Anmerkung', object: null, disabledRanges: false, disabledAssignment: false },
];
// Merged arrays
public displayedColumns: EditColumns[] = [
...this.beforeMonthsColumns,
...this.monthColumns,
...this.afterMonthsColumns
];
/**
* Click to show notes
*/
showNotes(columnName: any) {
this.displayedColumns.push(columnName);
}
/**
* Click to hide notes
*/
hideNotes(columnName: any) {
const colIndex = this.displayedColumns.findIndex((col) => col.attribute === columnName);
if (colIndex > 0) {
this.displayedColumns.splice(colIndex, 1);
} else {
console.log('Notes are hidden! Please use the showNotes function to show the Notes column again!')
}
}
This will only push string of 'note' to this.displayedColumns
(click)="showNotes('note')"
How about instead of just splice'ing and thowing the column away in hideNotes(), why not store the 'hidden' column in an array of hiddenColumns[]? And when showNotes is called, it adds the hidden column from hiddenColumns[] back to displayedColumns[].
showNotes(columnName: any) {
for (let col of this.hiddenColumns) {
if (columnName == col.attribute) {
this.displayedColumns.push(col);
}
}
}
hiddenColumns = [];
hideNotes(columnName: any) {
const colIndex = this.displayedColumns.findIndex((col) => col.attribute === columnName);
if (colIndex > 0) {
this.hiddenColumns.push(this.displayedColumns[colIndex])
this.displayedColumns.splice(colIndex, 1);
} else {
console.log('Notes are hidden! Please use the showNotes function to show the Notes column again!')
}
}