如何在渲染之前将参数传递给组件

Question

我试图在Blazor服务器端创建一个带有分页的简单表。

该表是一个Blazor组件，分页模块是另一个Bla佐r组件。分页组件(Paginador(有一个用于总行的参数(用于计算集合中的最后一页(。

我可以呈现表、分页部分，它会在页面更改时更新表的内容，但由于某种原因，TotalRows参数到达Paginador时的值为0，而不是总行的值。

代码如下。

列表组件：

@page "/personas/listar"
@inject SqlServerPersonasRepository _repo;
<h3>Lista de personas</h3>
<table class="table table-striped">
<thead>
<tr>
<th>DNI</th>
<th>Nombre</th>
<th>Apellido</th>
<th>Fecha de nacimiento</th>
<th>¿Activo?</th>
<th>Tipo</th>
</tr>
</thead>
<tbody>
@foreach (var item in _personas)
{
<tr>
<td><code>@item.Dni</code></td>
<td>@item.Nombre</td>
<td>@item.Apellido</td>
<td>@item.FechaNacimiento.ToString("dd/MM/yyyy")</td>
<td>@(item.Activo ? "Sí":"No")</td>
<td>@item.Tipo.Nombre</td>
</tr>
}
</tbody>
</table>
<div class="row">
<Paginador TotalRows="_total_rows" OnPageChange="@GetPageAsync" />
</div>
@code {
[Parameter]
public int Page { get; set; } = 1;
private int _total_rows;
private List<PersonaModel> _personas = new();
protected override async Task OnInitializedAsync()
{
_total_rows = await _repo.ContarAsync();
}
protected override async Task OnParametersSetAsync()
{
_personas = await _repo.ListarAsync(Page);
}
public async Task GetPageAsync(int page)
{
_personas = await _repo.ListarAsync(page);
}
}

Paginador:

@inject IOptions<TablesSettings> Options
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item @(_current_page == 1 ? "disabled": string.Empty)">
<button type="button" class="page-link" @onclick="(async () => await PageChangeAsync(1))" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
@*<span class="sr-only">1</span>*@
</button>
</li>
@if (_current_page == 1)
{
<li class="page-item disabled"><button type="button" class="page-link">1</button></li>
<li class="page-item"><button type="button" class="page-link" @onclick="(async () => await PageChangeAsync(2))">2</button></li>
<li class="page-item"><button type="button" class="page-link" @onclick="(async () => await PageChangeAsync(3))">3</button></li>
}
else if (_current_page == _last_page)
{
var two_to_last = _last_page - 2;
var one_to_last = _last_page - 1;
<li class="page-item"><button type="button" class="page-link" @onclick="(async () => await PageChangeAsync(two_to_last))">@two_to_last</button></li>
<li class="page-item"><button type="button" class="page-link" @onclick="(async () => await PageChangeAsync(one_to_last))">@one_to_last</button></li>
<li class="page-item disabled"><button type="button" class="page-link">@_last_page</button></li>
}
else
{
var previous = _current_page - 1;
var next = _current_page + 1;
<li class="page-item"><button type="button" class="page-link" @onclick="(async () => await PageChangeAsync(previous))">@previous</button></li>
<li class="page-item"><button type="button" class="page-link" @onclick="(async () => await PageChangeAsync(_current_page))">@_current_page</button></li>
<li class="page-item"><button type="button" class="page-link" @onclick="(async () => await PageChangeAsync(next))">@next</button></li>
}
<li class="page-item @(_current_page == _last_page ? "disabled" : string.Empty)">
<button type="button" class="page-link" @onclick="(async () => await PageChangeAsync(_last_page))" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
@*<span class="sr-only">@_last_page_index</span>*@
</button>
</li>
</ul>
</nav>
@code {
[Parameter]
public int TotalRows { get; set; }
[Parameter]
public EventCallback<int> OnPageChange { get; set; }
private int _current_page { get; set; } = 1;
private int _last_page;
protected override async Task OnInitializedAsync()
{
_last_page = (int)Math.Ceiling(decimal.Divide(TotalRows, Options.Value.RowsPerPage));
}
protected async Task PageChangeAsync(int page)
{
await OnPageChange.InvokeAsync(page);
_current_page = page;
StateHasChanged();
}
}

我发现，在加载页面时，Paginador会在调用列表组件的OnInitializedAsync方法之前呈现，因此TotalRows参数采用默认值。

那么，在渲染Paginador之前，我如何获得它的总行数呢？

提前谢谢。

Answer 1

那么，在呈现Paginador之前，我如何获得它中的行总数？

Put an @if block around the component expecting the data. – Brian Parker

这样做：

if (_total_rows > 0 )
{
<div class="row">
<Paginador TotalRows="_total_rows" OnPageChange="@GetPageAsync" />
</div>
}

如果行总数大于0，if语句现在将允许创建Paginador组件。

注意：我很快就读到了你的问题，但我相信这是你应该做的：

protected override async Task OnInitializedAsync()
{
// Retrieve the persons list
_personas = await _repo.ListarAsync(Page); 

}
// Get rid of  OnParametersSetAsync()

和

<div class="row">
<Paginador TotalRows="@_personas.Count" OnPageChange="@GetPageAsync" />
</div>