使用 Blazor 排序时图标不更新

Question

这是我第一次尝试 Blazor，我遇到了一个问题：图标未通过 Blazor 服务器更新。

我在 HTML 表格中有一个应用程序列表，我正在设置排序。我以这篇文章为例。

https://www.thecodehubs.com/sorting-table-in-blazor/< /a>

实际排序正在工作，但我试图让它更新显示的图标。我对这篇文章做了一些小的修改，主要是因为我使用 FontAwesome 作为我的图标，但我不认为这是问题所在。表头应显示三个图标之一。如果该列尚未排序，则会显示基本排序图标，然后根据排序顺序将图标更改为向上或向下箭头。显示未排序的初始图标，因此我知道它正在运行“SetSortIcon”函数。但是，一旦我对列进行实际排序，第一个图标就会消失，并且向上或向下箭头永远不会显示。如果我在排序后检查或在页面上执行“查看源代码”，我可以看到图标值为空。在文章中，它显示了图标正在工作，但我一定缺少诸如绑定之类的东西？

@page "/"
@page "/applications"
@using AppUserAdmin.Models
@using AppUserAdmin.Data
@inject AppUserAdmin.Data.DataManager db;

<style>
    .sort-th {
        cursor: pointer;
    }
    .fas {
        float: right;
    }
</style>


<h3>Applications</h3>

@if (applications == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <div class="row">
    <div class="col-6">
        <a class="btn btn-sm btn-success" href="/application">
            <i class="fas fa-plus"></i> New
        </a>
    </div>
    <div class="col-6">
    </div>
</div>
<div class="row mt-1">
    <div class="col-12">
        <table class="table table-themed">
            <thead>
                <tr>
                    <th class="sort-th" @onclick="@(() => SortTable("Name"))">
                        App Name <i class="@(SetSortIcon("Name"))"></i>
                    </th>
                    <th>
                        App Description
                    </th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach (var app in applications)
                {
                    <tr>
                        <td>@app.Name</td>
                        <td>@app.Description</td>
                        <td>
                            <a class="btn btn-sm btn-primary" href="/application/@app.Id">
                                <i class="fas fa-edit"></i> Edit
                            </a>
                            <a class="btn btn-sm btn-secondary" href="/groups/@app.Id">
                                <i class="fas fa-users"></i> Groups
                            </a>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>
}

@code {


    private List<App> applications;

    protected override void OnInitialized()
    {
        applications = db.GetApps();
    }

    private bool isSortedAscending;
    private string activeSortColumn;
    private void SortTable(string columnName)
    {
        if (columnName != activeSortColumn)
        {
            applications = applications.OrderBy(x => x.GetType().GetProperty(columnName).GetValue(x, null)).ToList();
            isSortedAscending = true;
            activeSortColumn = columnName;
        }
        else
        {
            if (isSortedAscending)
            {
                applications = applications.OrderByDescending(x => x.GetType().GetProperty(columnName).GetValue(x, null)).ToList();
            }
            else
            {
                applications = applications.OrderBy(x => x.GetType().GetProperty(columnName).GetValue(x, null)).ToList();
            }

            isSortedAscending = !isSortedAscending;
        }
    }

    private string SetSortIcon(string columnName)
    {
        if (activeSortColumn != columnName)
        {
            return "fas fa-sort";
        }
        if (isSortedAscending)
        {
            return "fas fa-sort-up";
        }
        else
        {
            return "fas fa-sort-down";
        }
    }
}

Answer 1

您的项目中的编码还有很大的改进空间
但对您的 SetSortIcon 进行这些更改以获取排序图标

 private string SetSortIcon(string columnName)
    {
        if (activeSortColumn != columnName)
        {
            return "fa fa-sort";
        }
        if (isSortedAscending)
        {
            return "fa fa-sort-up";
        }
        else
        {
            return "fa fa-sort-down";
        }
    }

并确保您已包含 Fontawesome

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">