Как указать тип TItem в компоненте виртуализации в Blazor WebAssembly внутри универсального шаблона таблицы

Я создаю общий шаблон таблицы в своем проекте blazor webassembly. Следуя документам, я настраиваю свой шаблон таблицы и пытаюсь включить виртуализацию в моем шаблоне таблицы следующим образом.

TableTemplate.razor:

@typeparam TItem

<table class = "@CssClass">
    <thead>
        <tr>@TableHeader</tr>
    </thead>
    <tbody>
        @if (Virtualize)
        {
            <Virtualize Context = "item" Items = "Items">
                <ItemContent>
                    <tr>@RowTemplate(item)</tr>
                </ItemContent>
                <Placeholder>
                    <p>Loading..</p>
                </Placeholder>
            </Virtualize>
        }
        else
        {
            @foreach (var item in Items)
            {
                <tr>@RowTemplate(item)</tr>
            }
        }
    </tbody>
</table>

ТаблицаTemplate.razor.cs:

public partial class TableTemplate<TItem>
{
    [Parameter]
    public string CssClass { get; set; }

    [Parameter]
    public bool Virtualize { get; set; }

    [Parameter]
    public RenderFragment TableHeader { get; set; }

    [Parameter]
    public RenderFragment<TItem> RowTemplate { get; set; }

    [Parameter]
    public IReadOnlyList<TItem> Items { get; set; }
}

Но я получаю следующую ошибку,

Аргументы типа для метода 'TypeInference.CreateVirtualize_0(RenderTreeBuilder, int, int, ICollection, интервал, RenderFragment, интервал, RenderFragment)» нельзя вывести из Применение.

Как указать тип if TItem в компоненте Virtualize? Пожалуйста помогите.

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
5
0
2 789
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

TItem — это универсальный тип, поэтому вам нужно передать его компоненту virtualize (который также является универсальным типом) следующим образом:

@typeparam TItem

<table class = "@CssClass">
    <thead>
        <tr>@TableHeader</tr>
    </thead>
    <tbody>
        @if (Virtualize)
        {
            <Virtualize Context = "item" Items = "Items" TItem = "TItem">
                <ItemContent>
                    <tr>@RowTemplate(item)</tr>
                </ItemContent>
                <Placeholder>
                    <p>Loading..</p>
                </Placeholder>
            </Virtualize>
        }
        else
        {
            @foreach (var item in Items)
            {
                <tr>@RowTemplate(item)</tr>
            }
        }
    </tbody>
</table> 

Также ваши предметы не могут быть public IReadOnlyList<TItem> Items { get; set; }, так как вы получите исключение, которое не может преобразовать их в ICollection<TItem>

Итак, эта часть должна быть:

    [Parameter]
    public ICollection<TItem> Items { get; set; }

Это было упомянуто выше Роном в конце, но я хотел добавить, что мне пришлось изменить свою коллекцию с IEnumerable на ICollection. Как только я сделал это ТОЛЬКО изменение, моя страница Blazor начала работать. Мне НЕ нужно было устанавливать TItem. Спасибо Рону Сийму за информацию выше.

Richard 30.06.2021 22:58

Другие вопросы по теме