This is the beginning of the component with the array that is as is at the beginning.
The number, serving for a test, is 0. If a
export class ExportComponent implements OnInit, AfterViewInit, OnDestroy {
...
public changedColumns = [];
public number = 0;
public displayedColumns: EditColumns[] = [
{ attribute: '1', name: 'Jan', object: 'values', disabledRanges: true, disabledAssignment: false },
{ attribute: '2', name: 'Feb', object: 'values', disabledRanges: true, disabledAssignment: false },
{ attribute: '3', name: 'Mrz', object: 'values', disabledRanges: true, disabledAssignment: false },
{ attribute: '4', name: 'Apr', object: 'values', disabledRanges: true, disabledAssignment: false },
{ attribute: '5', name: 'Mai', object: 'values', disabledRanges: true, disabledAssignment: false },
{ attribute: '6', name: 'Jun', object: 'values', disabledRanges: true, disabledAssignment: false },
{ attribute: '7', name: 'Jul', object: 'values', disabledRanges: true, disabledAssignment: false },
{ attribute: '8', name: 'Aug', object: 'values', disabledRanges: true, disabledAssignment: false },
{ attribute: '9', name: 'Sep', object: 'values', disabledRanges: true, disabledAssignment: false },
{ attribute: '10', name: 'Okt', object: 'values', disabledRanges: true, disabledAssignment: false },
{ attribute: '11', name: 'Nov', object: 'values', disabledRanges: true, disabledAssignment: false },
{ attribute: '12', name: 'Dez', object: 'values', disabledRanges: true, disabledAssignment: false }
];
ngOnInit() {
this.changedColumns = this.displayedColumns.map(c => c.name); // is needed for the months to be seen
//this.changedColumns = this.displayedColumns.map(c => c.attribute);
//console.log('Start columns Array', this.changedColumns );
}
...
Here are the columns that stand for the months
let columns = this.changedColumns;
this.navService.getBeginningOfFiscalYear().subscribe((yearResp: any) => {
console.log('Year Resp: ', yearResp);
if (yearResp && yearResp.success) {
const fiscalYearStart = yearResp.fiscalYearStart;
const monthOrder = yearResp.monthOrder;
console.log('Export fiscalYearStart:', fiscalYearStart);
console.log('Export monthOrder:', monthOrder);
if (monthOrder && monthOrder[0] !== '1') {// whether or not the if statement is gone, no difference in final result
const mc = [];
for (const month of monthOrder) {
const m = this.displayedColumns.find((i) => i.attribute === month);
mc.push(m);
}
console.log('Export mc', mc);// Output of new content
this.displayedColumns = [...mc];// New month array is made
columns = this.displayedColumns.map((c) => c.name);// mapping on names of sorted months
// this.navService.monthsDropdown = columns;
// console.log('Months: ', this.navService.monthsDropdown);
}
console.log('New Displayed Columns inside of subscribe', columns);
}
});
console.log('New columns outside of subscribe: ', columns);
this.number = 2;
In this code here, the year and each month's order(attrbutes in EditColumns) are shown in the console. If a fiscal year doesn't start with January, but with any other month, a new month order is made and the months are sorted in a corresponding array,all of it happening with the for loop (e.g. [Feb,..,Jan] if a fiscal year starts with February). Then you can see the sorted months, ONLY as long as you are in the subscription, though.
The number is a public number for a test of to try to somehow get dynamical changes. My core question is how can I dynamically create the array with newly sorted months and extract them from the subscribe. Inside of it, the months are sorted, but outside they are static and thus they are same like at the beginning. In ngOnInit, the changes aren't visible, either. I need the dynamically changed months to be printed on a PDF at the end, but I need some help here with how to extract the data and integrate the dynamic values.
Do you know how do all of it? Are there some good examples on how to generally save the dynamic value changes?
Here are the console inputs for you to help:
New columns outside of subscribe: (12) ["Jan", "Feb", "Mrz", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"] app-int_plan-level-dashboard-dashboard-module.js:sourcemap:68189 Export finished: {excel: true} main.js:sourcemap:1351 Year Resp: {monthOrder: Array(12), fiscalYearStart: "01.04.2021", success: true} main.js:sourcemap:1355 Export fiscalYearStart: 01.04.2021 main.js:sourcemap:1356 Export monthOrder: (12) ["4", "5", "6", "7", "8", "9", "10", "11", "12", "1", "2", "3"] main.js:sourcemap:1363 Export mc (12) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] 0: {attribute: "4", name: "Apr", object: "values", disabledRanges: true, disabledAssignment: false} 1: {attribute: "5", name: "Mai", object: "values", disabledRanges: true, disabledAssignment: false} 2: {attribute: "6", name: "Jun", object: "values", disabledRanges: true, disabledAssignment: false} 3: {attribute: "7", name: "Jul", object: "values", disabledRanges: true, disabledAssignment: false} 4: {attribute: "8", name: "Aug", object: "values", disabledRanges: true, disabledAssignment: false} 5: {attribute: "9", name: "Sep", object: "values", disabledRanges: true, disabledAssignment: false} 6: {attribute: "10", name: "Okt", object: "values", disabledRanges: true, disabledAssignment: false} 7: {attribute: "11", name: "Nov", object: "values", disabledRanges: true, disabledAssignment: false} 8: {attribute: "12", name: "Dez", object: "values", disabledRanges: true, disabledAssignment: false} 9: {attribute: "1", name: "Jan", object: "values", disabledRanges: true, disabledAssignment: false} 10: {attribute: "2", name: "Feb", object: "values", disabledRanges: true, disabledAssignment: false} 11: {attribute: "3", name: "Mrz", object: "values", disabledRanges: true, disabledAssignment: false} length: 12 [[Prototype]]: Array(0)
main.js:sourcemap:1369 New Displayed Columns inside of subscribe (12) ["Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez", "Jan", "Feb", "Mrz"]