Блог

У меня есть список, когда я нажимаю на элемент, я хотел бы изменить цвет этого элемента.

Я делаю это :

HTML

[ngStyle]="{'color': item.isClicked ? 'grey': ''}"

ts

   itemSelected(item) {
    if (item.isClicked) {
      item.isClicked = true;
    } else {
      item.isClicked = true;
    }
    this.router.navigate(['/details', { data: JSON.stringify(item) }]);
  
   }
  

это работает, но когда я обновляю страницу, она не работает. как мне сохранить?

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

Вы можете сохранить элемент в локальном хранилище, прежде чем покинуть страницу. И восстановление элемента из локального хранилища при запуске компонента:

 ngOnInit() {
  try {
    this.item = JSON.parse(localStorage.getItem('item'));
  } catch (err) {}
}
...
itemSelected(item) {
  if (item.isClicked) {
    item.isClicked = true;
  } else {
    item.isClicked = true;
  }
  const data = JSON.stringify(item);
  localStorage.setItem('item', data);
  this.router.navigate(['/details', { data }]);
}
  

Вам необходимо сохранить эту информацию в хранилище сеансов или локальном хранилище (если вы хотите большей сохраняемости, а не просто обновления страницы).

Кроме того, пожалуйста, просмотрите свой код один раз. Вы проверяете, имеет ли значение item.isclicked значение true, и снова присваиваете ему значение true. То же самое в блоке else.