Значки шрифтов awesome не изменяются методом onclick в blazor

#blazor #blazor-server-side

#blazor #blazor-на стороне сервера

Вопрос:

У меня есть простой метод SortClass(column) , который изменяет класс css, когда пользователь нажимает на значок, я проверил метод, и он работает нормально, но blazor не восстанавливает SVG после присвоения значения класса.

  <th  @onclick="@(() => SortData(col))" scope="col">
      @col.Caption
      <i class="@SortClass(col)"></i>
  </th>
 

Сортировочный класс:

 private string SortClass(ColumnDefinition col)
{
    if (col._SortDirection != SortDirection.NotSet)
    {
        return $"{col._SortDirection.ToString().ToLower()}"; // SortDirection is enum has value {"fas fa-sort-up", "fas fa-sort-down"}
    }
    return "invisible";
    
}
 

Метод Onclick:

  private void SortData(ColumnDefinition sortByCol = null)
        {
            if (sortByCol is null)
            {
                sortByCol = Columns.FirstOrDefault(x => x._SortDirection != SortDirection.NotSet);
                if (sortByCol is null) return;
            }
            if (sortByCol._SortDirection != SortDirection.NotSet)
            {
                switch (sortByCol._SortDirection)
                {
                    case SortDirection.NotSet:
                        sortByCol._SortDirection = SortDirection.Asc;
                        break;
                    case SortDirection.Asc:
                        sortByCol._SortDirection = SortDirection.Desc;
                        break;
                    case SortDirection.Desc:
                        sortByCol._SortDirection = SortDirection.Asc;
                        break;
                    default:
                        sortByCol._SortDirection = SortDirection.Asc;
                        break;
                }

                if (sortByCol._SortDirection == SortDirection.Asc)
                {
                    DataItems.Sort((x, y) => typeof(TItem).GetProperty(sortByCol.DataField).GetValue(x).ToString()
                        .CompareTo(typeof(TItem).GetProperty(sortByCol.DataField).GetValue(y).ToString()));
                }
                else
                {
                    DataItems.Sort((x, y) => typeof(TItem).GetProperty(sortByCol.DataField).GetValue(y).ToString()
                        .CompareTo(typeof(TItem).GetProperty(sortByCol.DataField).GetValue(x).ToString()));
                }
            }

        }
 

Ответ №1:

Я думаю, что ваш компонент не знает об изменениях, которые вы хотите внести, поскольку класс icon не привязан к свойству класса и изменениям или не внесен в предопределенном методе жизненного цикла, таком как OnInitialized etc.. Таким образом, либо привяжите класс icon к свойству, которое изменяется при выполнении сортировки, либо явно сообщите о своих изменениях, которые будут отображаться с помощью StateHasChanged() -метода.

Комментарии:

1. Привет, Барабара, спасибо за твой ответ, ColumnDefinition — это свойство в моем компоненте, поэтому ColumnDefinition — это класс, в котором есть конфигурация моих столбцов, а одна из конфигураций — значение css. Что касается StatehasChanged, я вызвал этот метод в конце sortData после добавления некоторой задержки, но SVG все тот же.

2. Не могли бы вы, пожалуйста, предоставить свой код (например, в BlazorFiddle , чтобы можно было воспроизвести сценарий?