Typescript: та же функция вызывается при выборе mat, а данные фильтра обновляются глобально

Question

Это угловое приложение. В ответ на мой предыдущий вопрос ссылка на вопрос .Я добавляю строки таблицы при нажатии кнопки.В каждой строке таблицы есть элемент mat-select, при событии onclick я вызываю функцию (onclickx). HTML-шаблон

<td>
   <div class="form-group">
     <mat-form-field>
      <mat-select (selectionChange) = "selectNumber($event.value)">
       <mat-option *ngFor="let type of productNo" [value]=type.num >
        {{type.num}}
       </mat-option>
      </mat-select>
     </mat-form-field> 
    </div>   
  </td>


<tr *ngFor="let product of record.products; let i = index ">
 <td>
   <div class="form-group">
    <mat-form-field>
     <mat-select  placeholder="Product" (click)="onclickx(i)">
      <mat-optgroup *ngFor="let product of filteredProducts" [label]="product.daemon">
          <mat-option *ngFor="let item of product.productlist" [value]="item.name">
           {{item.name}}
          </mat-option>
      </mat-optgroup>
    </mat-select>
   </mat-form-field>
  </div> 
</td>

машинопись

export class Template implements oninit{
filteredProducts:any[];
Value:number;
selectNumber (value) {
    this.Value = value;
}
  onclickx(i):any[]{
    this.Value ? this.searchTerm =this.Value : this.searchTerm ="1";
    this.filteredProducts[i] = this.searchTerm ? this.productlistArray.filter(productlistArray => productlistArray.number == this.searchTerm) : this.productlistArray;
    return this.filteredProducts;
  }

Будет две строки таблиц, и каждая строка таблицы имеет этот элемент выбора mat,при нажатии mat-select вызывается та же функция, так как this.filteredProducts является глобальной переменной, когда вторая строка обновляется списком продуктов, это также влияет на первую строку!как преодолеть эту проблему.