На стороне сервера Blazor показать, где были внесены изменения

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

Данные датчика поступают в event, и обновление пользовательского интерфейса запускается StateHasChanged.

Некоторые мысли: у меня возникла идея создать новый класс с данными senor и свойством HasChanged, но, поскольку я хотел бы использовать MatBlazorTables, который использует foreach, я не могу снова изменить HasChanged на false после его рендеринга. Вторая мысль, которая у меня возникла, заключалась в создании двух списков, один со «старыми» данными, а другой с новыми поступившими данными, а затем компонент razor просматривал, где были сделаны изменения.

Есть ли более простые и понятные решения, возможно, уже встроенные в Blazor, которых я еще не обнаружил?


person Max R.    schedule 15.01.2020    source источник
comment
Похоже на проблему, которую может помочь решить SignalR.   -  person Lars Kristensen    schedule 15.01.2020


Ответы (1)


Самый простой способ добиться этого - использовать CSS-анимацию - код C # или JS не требуется! (отказ от ответственности: я не эксперт по CSS!)

Анимации можно определить как определенную продолжительность и повторение. Когда вы добавляете элементы в список Blazor, Blazor добавляет их путем сравнения, поэтому существующие элементы не изменяются и не запускают анимацию для новых.

Я создал демонстрацию здесь: https://blazorfiddle.com/s/0qj50sch

Пример

Пример флеш-анимации

person Quango    schedule 16.01.2020
comment
Интересно, не знал, что это возможно с чистым CSS. Проблема в том, что я хочу показать пользователю, когда элемент в списке был изменен, а не то, что элемент был добавлен. Возможно ли это и с помощью CSS? Я обновил blazorfiddle кнопкой изменения: blazorfiddle.com/s/hm4iw1up - person Max R.; 20.01.2020
comment
@MaxR. извините, я не очень хорошо прочитал вопрос! Да, если у вас есть существующий список элементов, вам нужно добавить класс к элементу, который вы хотите прошить. Однако, конечно, это будет обновляться только один раз. Я рассматривал возможность использования таймера для удаления класса, но был более простой способ - создать два класса (с разными именами) и переключаться между ними при каждом обновлении. Пример: blazorfiddle.com/s/5m86vp64 - это не идеально, но может быть адаптировано - person Quango; 20.01.2020
comment
Интересно, что edge on chromium, похоже, опускает класс 2., поскольку он выглядит одинаково для браузера (что на самом деле верно), поэтому нам нужно изменить одну мелочь в одном классе, чтобы он работал. Я установил 3. percantage от 90% до 89%. Также я установил для класса td вместо элемента tr и установил фон flash на transparent, чтобы цвет фона оставался прежним. Все это кажется немного хакерским и причудливым, но работает довольно хорошо, хотя я пытался найти решение (как упоминалось выше) без добавления дополнительного свойства в свой класс. Спасибо! blazorfiddle.com/s/440baf3h - person Max R.; 21.01.2020
comment
@MaxR. да, у меня возникли некоторые проблемы, когда я попробовал. Возможно, Chrome не любит, когда класс меняется, пока анимация все еще работает. - person Quango; 21.01.2020