Как нарисовать неполные компоненты во время подписки?

Question

У меня есть «нормальная» подписка для получения данных из http-источника, например:

sscmData.getRegistrations().subscribe(response => {
    this.registeredSkaters = response.map( item => item.skater )
})

Данные наконец представлены в виде таблицы html.Поскольку объем данных может быть довольно большим, потребуется время, пока таблица не будет отображена.

Теперь я мог показать "круг загрузки" или что-то еще при создании таблицы, но я ищу более разумное решение.

Можно ли отображать "неполные загруженные" таблицы или списки, пока данные все еще "загружаются по подписке ()"?Есть ли какая-либо концепция для этого?

Спасибо за вашу помощь!

Answer 1

Если картина "медленная", вы, вероятно, блокируете поток пользовательского интерфейса.Вы должны реализовать это на уровне таблиц, большинство таблиц имеют нумерацию страниц.Если вы хотите отложить элементы, используйте задержку и сканируйте:

import { of, from, timer} from 'rxjs'; 
import { map, mergeMap, scan, delay } from 'rxjs/operators';

const arr = new Array(15)
  .fill(null)
  .map((_,i) => i);

const source = of(arr).pipe(
  mergeMap(x => from(x)),
  delay(50),
  scan((a: Array<number>,c: number) => [...a, c], [])
);

source.subscribe(x => console.log(x));

Это приведет к следующему:

Answer 2

Я могу ошибаться, но я не думаю, что вы можете получить неполные данные для отображения в таблице.Я даже не могу думать о том, как это было бы возможно.

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

Если этот бэкэнд находится под вашим контролем, я бы порекомендовалчтобы вы реализовали его там.

Таким образом, он будет иметь меньшую нагрузку на ваш внешний интерфейс, а также на ваш внутренний сервер, меньше данных будет передаваться по сети, что приведет к более быстрой загрузке приложения и улучшению взаимодействия с пользователем.