Array Gets Replaced With New Values

I've an array which gets populated when I change values in drop down boxes. So I've four drop down boxes with the same event as follows (The drop down boxes are dynamic ones that comes from a service):

<mat-select
#segmentSelector
[formControlName]="filter.COLUMN_NAME"
multiple
placeholder="Select"
(selectionChange)="logUserSearchData($event.value, filter.COLUMN_NAME)">
</mat-select>


In the event (selectionChange)="logUserSearchData($event.value, filter.COLUMN_NAME)", I've something as follows:

dynamic_filters: any[] = [];
other_dynamic_filters: any[] = [];
newVal: string = "";

logUserSearchData(val: any, columnName: any) {
var obj = val as [];

if (columnName === "") {
this.dynamic_filters = [];

for (var i = 0; i < obj.length; i++) {
console.log(obj);

this.dynamic_filters.push(obj); //This works fine
}
}
else { //The issue occurs when it comes to else condition
this.other_dynamic_filters = [];

for (var i = 0; i < obj.length; i++) {
console.log(obj);

this.newVal = columnName + ":" + obj;
this.other_dynamic_filters.push(this.newVal); //Now the issue is here, when I select values from first drop down box and later the second one, it takes values of the second drop down box only
}
}


How I can enforce the array to have values from the drop down boxes (In the same array) when a condition is met or is there any better way of doing so?

Continue reading...