如何解决Blazor,MatBlazor-如何捕捉MatSelect组件的值更改
我在项目中使用了MatBlazor框架。 在MatSelect中,我想捕获其值onchange事件以执行其他一些工作。 我已经尝试了一些解决方案,但是onchange事件尚未触发。
"react-native-gesture-handler": "^1.8.0","react-native-router-flux": "^4.2.0",
以下是我的onchange事件处理程序。但是在下拉列表中选择另一个值时并没有触发:
<MatSelect Label="Customer" Value="@customer" ValueChanged="OnChangeCustomer">
<MatOptionString Value="-1">All</MatOptionString>
@foreach (var item in customers)
{
<MatOption Value="@item.Id">@item.Name</MatOption>
}
</MatSelect>
有人可以帮助我吗? 谢谢
解决方法
您可以使用MatSelect控件引用以下示例:
<MatSelect Outlined="true" Label="Category" ValueChanged="(string i) => OnChangeCategory(i)">
<MatOptionString Value="-1">All</MatOptionString>
@foreach (var cat in GetCategories())
{
<MatOptionString Value="@cat.Id.ToString()">@cat.Name</MatOptionString>
}
</MatSelect>
<span>@selectedValue</span>
@code
{
public string selectedValue;
protected List<Customer> GetCategories()
{
//return new List<string>() { "AA","BB" };
return new List<Customer>() {
new Customer(){Id=1001,Name="Tom"},new Customer(){Id=1002,Name="David"},new Customer(){Id=1003,Name="Lucy"}
};
}
protected void OnChangeCategory(string value)
{
//do something
selectedValue = "Selected Value: " + value;
}
}
以下截图:
更多详细信息,请查看MatSelect文档。
,@ZhiLv 的代码运行良好,但如果你想要一个预填充的动态选择值,它会变得更难。
我花了很多时间试图让它与 MatSelectValue
一起工作,但没有运气。
https://www.matblazor.com/SelectValue
我最终使用了一个简单的 MatSelect
,其属性调用了我的 onchange event
方法。这是我让选择列表正确预填充的唯一方法。
可空 int 的示例,但您也可以更改为字符串、guid 等。
https://www.matblazor.com/Select#MatSelectGuid
@inject StateContainer StateContainer
<MatSelect Label="Choose threat" @bind-Value="@SelectThreatId" Outlined="true" FullWidth="true">
@foreach (var item in selectThreats)
{
<MatOption TValue="int?" Value="@item.Id">@item.Threat</MatOption>
}
</MatSelect>
@code
{
[Parameter]
public ThreatAndCountermeasureDto ThreatAndCountermeasureDto { get; set; }
List<ThreatDto> selectThreats = new List<ThreatDto>();
ThreatDto selectedThreat = null;
private int? threatId = null;
public int? SelectThreatId
{
get { return threatId; }
set
{
threatId = value;
SelectThreatValueChanged(value);
}
}
private void SelectThreatValueChanged(int? id)
{
selectedThreat = StateContainer.Threats.Single(x => x.Id == id);
}
protected override void OnInitialized()
{
base.OnInitialized();
StateContainer.OnChange += StateHasChanged;
SelectThreatId = ThreatAndCountermeasureDto.Threat.Id;
selectThreats = StateContainer.Threats.ToList();
}
...
来源:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。