如何使表可见，只有在按钮点击后?

Question

我有一个显示文件内容的表。当单击按钮时，内容本身会显示，但是我如何隐藏th elements，直到按下按钮?

<span @onclick="() => editFile(Text)">
<button>Edit</button>
</span>

<table >
@foreach (var item in oneFile)
{
<input @bind="item.Title" type="text" />
}    
<thead >
<tr>
<th scope="col">Line</th>
<th scope="col">One</th>
<th scope="col">Two</th>
<th scope="col">Three</th>
</tr>
</thead>
<tbody >
@foreach (var item in items)
{

<tr>
<td>@(items.IndexOf(item) + 1)</td>
<td>
<input @bind="item.One" type="number" size="3" />
</td>
<td>
<input @bind="item.Two" type="number" size="3" />
</td>
<td>
<input @bind="item.Three" type="number" size="3" />
</td>
</tr>
}
</tbody>
</table>

Answer 1

最简单的解决方案是不呈现它们。你可以有一个标志，根据标志的值，你可以显示或隐藏页面的组件。

<span @onclick="() => editFile(Text)">
<button>Edit</button>
</span>

<table >
@foreach (var item in oneFile)
{
<input @bind="item.Title" type="text" />
}    
<thead >
@if(isShown)
{
<tr>
<th scope="col">Line</th>
<th scope="col">One</th>
<th scope="col">Two</th>
<th scope="col">Three</th>
</tr>
}
</thead>
<tbody >
@foreach (var item in items)
{

<tr>
<td>@(items.IndexOf(item) + 1)</td>
<td>
<input @bind="item.One" type="number" size="3" />
</td>
<td>
<input @bind="item.Two" type="number" size="3" />
</td>
<td>
<input @bind="item.Three" type="number" size="3" />
</td>
</tr>
}
</tbody>
</table>
@code
{
bool isShown = false;
void editFile(string Text)
{
isShown = true;
}
}