#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 , чтобы можно было воспроизвести сценарий?