Отображение нескольких сеток на одной странице с разными наборами данных

У меня есть две сетки данных на одной странице. Цель состоит в том, чтобы каждая сетка данных выполняла вызов API с разными параметрами и отображала данные, чтобы они функционировали индивидуально.

Я могу заставить сетки делать разные вызовы API и получать данные. Но я столкнулся с проблемой индивидуальной настройки данных для этих сеток.

Я создал пример StackBlitz, демонстрирующий проблему.

app.component.ts

refresh(state: ClrDatagridStateInterface, postId) {
      this.loading=true;
      const filters: { [prop: string]: any[] } = {};
      if (state.filters) {
        for (const filter of state.filters) {
          const { property, value } = <{ property: string; value: string }>filter;
          filters[property] = [value];
        }
      }
      if (state.page != undefined && state.page != undefined)
      {
        setTimeout(() => {
        this.loading = true;
        this.getData(postId, state.page.from, state.page.size );
        });
      }
  }

    getData(postId:string, page: number, size:number  ) {
    this.userAccounts$ = this.informationService.GetUserAccounts(postId);
      this.userAccounts$
        .subscribe((data) => {
            this.users = JSON.parse(JSON.stringify(data)) || null
            this.loading = false
        }
        );
    }

Я создаю сетки в цикле for, используя массив идентификаторов сообщений.

posts:any = ["1","4"];

Каждая сетка должна выполнять вызов API с этим postId,

Ex: https://jsonplaceholder.typicode.com/comments?postId=1
Ex: https://jsonplaceholder.typicode.com/comments?postId=4

чтобы получить postId и email и отобразить их в сетке. Каждая сетка должна функционировать индивидуально, будь то сортировка, фильтрация или пейджинг.

Функция getData глобально устанавливает данные API для использования в обеих сетках. Как я могу установить его для сеток индивидуально?