Можете ли вы добавить строки в таблицу asyn c из предварительно созданного набора данных? - PullRequest
Новая
       42

Можете ли вы добавить строки в таблицу asyn c из предварительно созданного набора данных?

0 голосов
/ 03 августа 2020

Мне нужно отобразить таблицу данных. Потенциально существует много сотен строк, и на их рендеринг уходит пара секунд. В течение этого времени пользовательский интерфейс кажется замороженным.

Данные уже находятся в памяти, поэтому я полагаю, что время занимает только часть рендеринга.

Я думал, что если пользователи могли ВИДЕТЬ каждую строку, добавляемую в таблицу, это было бы не так плохо. Вот общая концепция кода. 

@if (MyList!= null)
{
<table class="table">
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Date</th>
            <th scope="col">ExtraData</th>
            @if (ExtraData == DataType.Good)
            {
                <th scope="col">Good Data</th>
            }
            @if (ExtraData == DataType.Bad)
            {
                <th scope="col">Bad Data</th>
            }
        </tr>
    </thead>
    <tbody>
        @foreach (var c in MyList)
        {
            <tr>
                <td>@c.Name</td>
                <td>@c.Date.ToShortDateString()</td>
                <td>@c.Data.ToString()</td>
                @if (ExtraData == DataType.Good)
                {
                    <td>c.GoodData.ToString()</td>
                }
                @if (ExtraData == DataType.Bad)
                {
                    <td>c.BadData.ToString()</td>
                }
            </tr>
        }
    </tbody>
</table>
}
else
{
<div>Loading...</div>
}

@code {
[Parameter] public List<Data> MyList{ get; set; }
[Parameter] public DataType ExtraData { get; set; }
}

1 Ответ

0 голосов
/ 03 августа 2020

Как вы загружаете данные, используется ли асинхронный вызов c при инициализации компонента?

Если это так, то вы можете добавить дополнительный оператор if следующим образом: 

@if (MyList == null)
{
    <div>Data is loading</div>                              
(or optionally have a spinner here)                     
}                           
else if (MyList != null)...
...