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[i]);

    this.dynamic_filters.push(obj[i]); //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[i]);

     this.newVal = columnName + ":" + obj[i];
     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?

very confusing code... and it's not entirely clear what exactly is needed. If you want to constantly add new values, then try removing

this.other_dynamic_filters = [];

I hope this helps, or please describe the problem in more detail