单向数据属性属性更新时不更新组件
我有一段时间的时间理解为什么当更新简单的单向数据属性属性(列表)时,为什么我的组件的UI不会重新渲染。我还有其他可以使用相同方法重新渲染的可路由组件,但这种不可用的组件似乎并不想以相同的方式行事?我的理解是,组件应更新,而无需在任何一个onclick
事件上调用statehaschanged()
。
@inherits Aivia.Bases.AltitudePage;
@inject IAlertService _alertService
@inject IJSRuntime _js;
@if (dsAlerts != null && dsAlerts.Any())
{
<div class="alerts mt-3">
<div class="container">
@foreach (var dto in dsAlerts)
{
<div class="alert alert-primary p-3" role="alert">
<div class="row g-0">
<div class="col-auto icon">
<i class="fa-solid fa-comments"></i>
</div>
<div class="col">
<div class="title">
@dto.Title
</div>
<div class="description">
@dto.Description
</div>
<div class="actions">
<button type="button" class="btn btn-primary" onclick="@(() => Read(dto))">
<i class="fa-regular fa-circle-check me-2"></i>
Dismiss
</button>
</div>
</div>
</div>
</div>
}
</div>
</div>
}
@code {
private IEnumerable<dtoAlert> dsAlerts = Enumerable.Empty<dtoAlert>();
protected override void OnInitialized()
{
GetAlerts();
}
private void GetAlerts()
{
this.dsAlerts = _alertService.queryUnreadAlerts(this.UserID).OrderBy(x => x.CreatedOn).ToList();
}
private void Read(dtoAlert dto)
{
_alertService.Read(this.UserID, dto.ID);
GetAlerts();
}
}
I'm having a heck of a time understanding why my component's UI will not re-render when a simple one-way databound property (List) is updated. I have other routable components re-rendering using the same approach without issue, but this non-routable component does not seem to want to behave the same way? It is my understanding that the component should update WITHOUT having to call StateHasChanged()
on either onclick
events.
@inherits Aivia.Bases.AltitudePage;
@inject IAlertService _alertService
@inject IJSRuntime _js;
@if (dsAlerts != null && dsAlerts.Any())
{
<div class="alerts mt-3">
<div class="container">
@foreach (var dto in dsAlerts)
{
<div class="alert alert-primary p-3" role="alert">
<div class="row g-0">
<div class="col-auto icon">
<i class="fa-solid fa-comments"></i>
</div>
<div class="col">
<div class="title">
@dto.Title
</div>
<div class="description">
@dto.Description
</div>
<div class="actions">
<button type="button" class="btn btn-primary" onclick="@(() => Read(dto))">
<i class="fa-regular fa-circle-check me-2"></i>
Dismiss
</button>
</div>
</div>
</div>
</div>
}
</div>
</div>
}
@code {
private IEnumerable<dtoAlert> dsAlerts = Enumerable.Empty<dtoAlert>();
protected override void OnInitialized()
{
GetAlerts();
}
private void GetAlerts()
{
this.dsAlerts = _alertService.queryUnreadAlerts(this.UserID).OrderBy(x => x.CreatedOn).ToList();
}
private void Read(dtoAlert dto)
{
_alertService.Read(this.UserID, dto.ID);
GetAlerts();
}
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
onclick =“@(()=&gt; read; read(dto))只需要@onclick =“@(()=&gt; read; read(dto))”
onclick="@(() => Read(dto))" simply needed to be @onclick="@(() => Read(dto))"