[英]How can I refresh a child component from a parent component multiple times from the same method?
Right now my child component only updates once the GetLeads()
method in the parent component is finished.现在我的子组件只有在父组件中的
GetLeads()
方法完成后才会更新。 I never see the spinner or Searching text.我从来没有看到微调或搜索文本。
Parent Component:父组件:
<SearchResultComponent @ref="ChildComponent"></SearchResultComponent>
Code:代码:
protected SearchResultComponent ChildComponent;
public int LeadsFound { get; set; }
public void GetLeads()
{
ChildComponent.Refresh(true, 0);
var leads = _searchService.Search(searchRequest);
LeadsFound = leads?.Count ?? 0;
_writeFileService.WriteToFile(leads);
ChildComponent.Refresh(false, LeadsFound);
}
Child Component:子组件:
@code {
public bool Searching { get; set; } = false;
public int LeadsFound { get; set; } = 0;
public void Refresh(bool searching, int leadsFound)
{
Searching = searching;
LeadsFound = leadsFound;
StateHasChanged();
}
}
@if (Searching)
{
<div>Searching...</div>
<div>
<img src="~/Content/searching-spinner.gif" />
</div>
}
else
{
<div>Leads Found: @LeadsFound</div>
}
my child component only updates once
我的子组件只更新一次
You can make the eventhandler async.您可以使事件处理程序异步。 That allows you then to call
Task.Delay(1)
or Task.Yield()
and that will effectuate the StateHasChanged().然后,您可以调用
Task.Delay(1)
或Task.Yield()
,这将影响 StateHasChanged()。
The call form @onclick="@GetLeads"
can remain the same.调用表单
@onclick="@GetLeads"
可以保持不变。 Note that you don't need the 2nd @
in there.请注意,您不需要那里的第二个
@
。
If your searchService.Search()
was async then you wouldn't need Task.Yield()
如果您的
searchService.Search()
是异步的,那么您将不需要Task.Yield()
public async Task GetLeads()
{
ChildComponent.Refresh(true, 0);
await Task.Yield(); // enable the render thread to run.
var leads = _searchService.Search(searchRequest);
LeadsFound = leads?.Count ?? 0;
_writeFileService.WriteToFile(leads);
ChildComponent.Refresh(false, LeadsFound);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.