Blazor 将列名参数传递给组件以及组件中的第二个参数

Question

所以我有一个div，在这个div中有一个Sort组件。我想要实现的是，当我单击组件中的图标之一时，它应该使用以下参数调用 LoadProjects：columnname 和 isAscending。 isAscending 为 true 还是 false，取决于单击的图标。我将提供我的代码的一些屏幕截图。我在 ChatGPT 的帮助下对其进行了编码，但出现了错误。

[Table.razor 文件：]

<th class="M2 border-color">
    <div class="flex ml-[25px] flex-row text">
        <span>release</span>
        <Sort columnName="projectname" OnSortClick="LoadProjects"/>
        <Filter />
    </div>
</th>

[Table.razor 中的 LoadProjects 方法]

private async Task LoadProjects(string column, bool asc)
{
    projects = await projectsService.GetProjects(column, asc);
    sortedProjects = new List<Projects>(projects);
}

[对组件进行排序t]

<svg class="ml-[10px]" xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 16 20" fill="none">
    <path d="M8 0L14.4952 7.5H1.50481L8 0Z" fill="#C0C5CA" @onclick="HandleClickAsc" />
    <path d="M2.59926 13L8 19.2362L13.4007 13H2.59926Z" fill="#C0C5CA" stroke="#C0C5CA" @onclick="HandleClickDesc"/>
</svg>

@code{
 [Parameter] public string columnName { get; set; }
 [Parameter] public EventCallback<(string, bool)> OnSortClick { get; set; }

    private async Task HandleClickAsc()
    {
        await OnSortClick.InvokeAsync((columnName,false));
    }

    private async Task HandleClickDesc()
    {
        await OnSortClick.InvokeAsync((columnName, true));
    }
}

我希望您理解我想要实现的目标并可以帮助我。顺便说一句，我是 Blazor 的初学者。

我得到的错误是CS1503

ChatGPT 但并没有真正帮助

Answer 1

因为您传递一个匿名元组作为 EventCallback 有效负载。

[Parameter] public EventCallback<(string, bool)> OnSortClick { get; set; }

LoadProjects(string column, bool asc)

方法无法自动将元组解构为局部变量。因此，您需要更明确地声明该方法将接受的参数，然后您可以像这样使用

column

和

asc

变量。

private async Task LoadProjects((string column, bool asc) tuple)
{
    // just use it directly
    tuple.column;
    tuple.asc;
    
    // or deoncstruct to local variables
    string column = tuple.column;
    bool asc = tuple.asc;
    
    // or a shorthand deoncstruction
    var (column, asc) = tuple;
}

片段演示

---

在演示中我做了以下更改。

1. 我更改了您的排序方法，单击以调用相同的

   HandleClick

   方法，其中每个图标将传递不同的 bool 参数，例如

   @onclick="(e)=>HandleClick(true)"

2. PascalCase 的

   ColumnName

   属性是在 Blazor 中命名公共参数时的约定。

<svg class="ml-[10px]" xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 16 20" fill="none">
    <path d="M8 0L14.4952 7.5H1.50481L8 0Z" fill="#C0C5CA" @onclick="(e)=>HandleClick(true)" />
    <path d="M2.59926 13L8 19.2362L13.4007 13H2.59926Z" fill="#C0C5CA" stroke="#C0C5CA" @onclick="(e)=>HandleClick(false)"/>
</svg>

@code{
    [Parameter] public string ColumnName { get; set; }
    [Parameter] public EventCallback<(string, bool)> OnSortClick { get; set; }

    private async Task HandleClick(bool isAsc)
    {
        await OnSortClick.InvokeAsync((ColumnName,isAsc));
    }
}