c# - 为什么删除事件后 Blazor UI 组件不更新?
问题描述
为什么删除事件后Blazor UI不更新:
我的组件:
<table class="table table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Example</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var trainingTechnique in TrainingTechniques) {
<tr>
<td>@trainingTechnique.Id</td>
<td>@trainingTechnique.Name</td>
<td>@trainingTechnique.Example</td>
<td>
<button type="button"
class="btn btn-danger"
@onclick="@(async () => await DeleteTechnique(trainingTechnique.Id))">
Delete
</button>
</td>
</tr>
}
</tbody>
</table>
我背后的组件代码:
public class TrainingTechniqueViewPageBase : ComponentBase
{
public List<TrainingTechniqueView> TrainingTechniques { get; set; }
[Inject]
public ITrainingTechniqueConsumer TrainingTechniqueConsumer { get; set; }
protected TrainingTechniqueForm TrainingTechniqueForm { get; set; }
protected override async Task OnInitializedAsync()
{
TrainingTechniques = (await TrainingTechniqueConsumer.GetTechniques()).ToList();
}
public async void TrainingTechniqueForm_OnSave()
{
TrainingTechniques = (await TrainingTechniqueConsumer.GetTechniques()).ToList();
StateHasChanged();
}
protected void AddTrainingTechnique()
{
TrainingTechniqueForm.Show();
}
protected async Task DeleteTechnique(int id)
{
await (TrainingTechniqueConsumer.DeleteTrainingTechnique(id));
this.StateHasChanged();
}
}
}
删除方法:
public async Task DeleteTrainingTechnique(int id)
{
await _httpClient.DeleteAsync($"training/trainingtechniques/{id}");
}
解决方案
解决方案 1:从源重新加载 TrainingTechniques 列表
private async Task Delete(int id)
{
await TrainingTechniqueConsumer.DeleteTrainingTechnique(id);
TrainingTechniques = (await TrainingTechniqueConsumer.GetTechniques()).ToList();
}
解决方案 2:从列表中删除项目:
<table class="table table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Example</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var trainingTechnique in TrainingTechniques)
{
<tr>
<td>@trainingTechnique.Id</td>
<td>@trainingTechnique.Name</td>
<td>@trainingTechnique.Example</td>
<td>
<button type="button" class="btn btn-danger" @onclick="@(() => DeleteTechnique(trainingTechnique.Id))">Delete</button>
</td>
</tr>
}
</tbody>
</table>
和删除方法:
private async Task Delete(int id)
{
TrainingTechniques.RemoveAll(x => x.Id == Id);
await TrainingTechniqueConsumer.DeleteTrainingTechnique(id);
}
推荐阅读
- python - 如果不是 NAN,则用以前的值替换 Pandas 中的缺失值
- javascript - 无法通过 onClick 传递参数
- sql - SQL 代理作业创建错误:作业“XXX”已针对服务器“YYY”
- mysql - Mysql - 每小时总和时差和组
- r - 如何比较 R 中两个数据集的 POSIX 日期时间
- excel - 如何在取消输入框中退出子
- post - 如何使用openge requestBuilder同时使用param和json有效负载制作http帖子
- ios - 在 Swift 2.0 中隐藏 Home 指示器
- reactjs - 检查用户打开网站时是否登录的最佳方法
- mouseevent - 在使用 Vue 按下鼠标时,我需要捕获哪个事件来捕捉鼠标移动