Насколько быстро работает setValue FormControl?

Например, у меня есть огромный массив строк, и количество строк со временем продолжает увеличиваться (я получаю обновленный массив через веб-сокет каждую секунду).
Все, что мне нужно, это показать все строки в компоненте. Что ж, самым простым решением является ngFor и перенос каждой строки в div, но мне не нравится идея нескольких сотен div в компоненте.
Поэтому я решил попробовать использовать только одно текстовое поле, подобное этому (кратко):

<mat-form-field>
  <textarea matInput [formControl]='myArrayofStrings'></textarea>
</mat-form-field>

И в компоненте просто обновляйте это значение каждый раз, когда я получаю новый массив:

this.myArrayofStrings.setValue(newArray);

Итак, мой вопрос — насколько надежным, шустрым и быстрым было бы это решение?

Может быть, есть какие-то другие более умные решения для этой, знаете ли, тривиальной задачи.
(Кстати, мой стек - Angular 7, Angular Material)

Заранее спасибо.


1
177
1

Ответ:

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

Некоторые идеи:

  1. Создайте таблицу: Создать источник данных для стандартного углового материала таблицы из журнала, который вы получаете из сокета, но используйте данные только при получении источника данных таблицы: я имею в виду каждый раз, когда таблица запрашивает свои данные, вы проверяете ваш постоянно растущий объект, и возвращайтесь соответственно. Например, вы можете использовать разбиение на страницы или установить кнопку «обновить» и только повторно отображать по требованию пользователя. (хорошей базой для этого будет примеры таблиц /Таблица, получающая данные через HTTP

  2. Извлечь на более мелкие фрагменты: Создайте «массив ведер» и нажимайте только на «ведра». Например: каждое ведро может содержать 100 строк журнала, и вы обновляете только текущее ведро, пока оно заполняется. Таким образом, только последние строки 1-99 будут перерисованы, остальные элементы не будут.

  3. Создание пакетов данных Создавайте объекты, которые являются линиями, и обновляйте их только в том случае, если новые данные превышают заданную длину. Например, вы обновляете представление только после появления 50 новых строк или каждые x. секунд - таким образом вы разделяете рендеринг и событие веб-сокета, давая время для рендеринга пользовательского интерфейса.