Рендеринг нескольких сеток на одной странице с разными наборами данных - PullRequest
Новая
       13

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

0 голосов
/ 02 июля 2019

У меня есть две таблицы данных на одной странице. Цель состоит в том, чтобы каждая сетка данных выполняла вызов 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 для использования в обеих сетках. Как я могу настроить его для сетки индивидуально?

1 Ответ

1 голос
/ 02 июля 2019

Вы всегда устанавливаете this.users = JSON.parse(JSON.stringify(data)) || null в своей подписке и всегда зацикливаетесь на users.Таким образом, в основном вы не создаете другое свойство для хранения данных.

Вообще, я бы поспорил с таким подходом.То, что я хотел бы сделать, это один раз инкапсулировать всю сетку данных в качестве компонента с входом, чтобы принять данные конфигурации (похоже, postId).Затем дважды используйте компонент, чтобы получить дубликаты данных, которые индивидуально инкапсулированы.В противном случае, у вас много логических кровотечений между обеими сетями данных, и с этим может быть трудно справиться.

...