как показать один случайный цвет фона для каждой записи в таблице html

Question

Я использую angular версию 8. В моем приложении я должен показать случайный цвет для каждой записи в таблице html. но при отображении случайного цвета, если я перемещаю курсор на странице отображения, для каждого движения цвет меняется, и я вижу много новых цветов для отдельной записи. Кто-нибудь может подсказать, как показать один случайный цвет для одной записи в таблице html.

вот мой код ..

getRandomColor() {
      let letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      const styles = {
        'background-color' : color,
        'padding':"27px",
        "border-radius":"100%",
        "color":"white"
      };
      return styles;
    }

 <span  [ngStyle]="getRandomColor()">V</span>

Answer 1

Это происходит, потому что Angular запускает обнаружение изменений при каждом перемещении мыши. Когда происходит обнаружение изменений, Angular выполняет все функции, которые связаны в шаблоне.

По этой причине (узкое место в производительности) не рекомендуется привязывать функции к шаблонам. Вы можете прочитать больше об этом здесь и здесь .

Теперь для фактического решения, вот описание подхода.

Поскольку это не быстрое решение, я не могу опубликовать полный код здесь, поэтому вам нужно будет использовать эти предложения для реализации. Если вы где-то застряли или не знаете некоторых моментов (например, как создать трубу), разместите отдельные вопросы или выполните поиск.

Вместо создания случайного цвета, идея состоит в том, чтобы создать цвет для каждой ячейки на основе значения в ячейке таблицы. Таким образом, вы можете использовать канал, чтобы получить код цвета на основе заданного c ввода:

1. Вместо [ngStyle]="getRandomColor()" вы бы сделали что-то вроде этого: [style.background]="cellValue | getRandomColor".

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

Создать трубу. Логика c для трубы может быть принята от здесь .

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